высота: 100% для анкерной метки внутри ячейки ячейки, сохраняющей вертикальное выравнивание

Question

Как выровнять по вертикали «Foo» Между «Бар» и «Баз», как это происходит автоматически без якоря? Я не могу использовать line-height hack, потому что я хочу, чтобы текст ссылки расширял ячейку значительно.

<table> 
    <tr> 
    <td class="link-wrap"> 
     <a class="link" href="#"> 
     Foo 
     </a> 
    </td> 
    <td>Bar<br>Baz</td> 
    </tr> 
</table> 

CSS:

table { 
    border-collapse: collapse; 
} 

td { 
    border: 1px solid #ddd; 
} 

.link-wrap { 
    height: 100%; 
} 

.link { 
    display: block; 
    background: #afa; 
    height: 100%; 
} 

Sandbox

Answer 1

Вы хотите этого? jsbin 1

Решение прост: не используйте display: block с высотой. Здесь проблема.

Если вы хотите применить цвет к целому td, примените его также к td, а не к внутреннему элементу.

---

UPDATE: jsbin 2

Просто некоторые магия. Я сделал преобразование тега <a> в таблицу (с помощью css, поэтому у нее есть все ее свойства), и я создал <span> в ней с vertical-align: middle; и display: table-cell;. Так что это в основном таблица в таблице. Таким образом, псевдо-таблица - это <a>: доступно для просмотра во всем пространстве.