在单元格表内制作跨度以达到100％高度

Question

跨度如何扩展所有高度？

http://jsfiddle.net/e27wut2p/

<table class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th class="shrink"></th>
            <th class="shrink">AAA</th>
            <th class="shrink">BBB</th>
            <th class="shrink">CCC</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center"><span class="label label-default"><span class="glyphicon glyphicon-plus"></span></span></td>
            <td>1<br>1<br>1<br>1<br>1<br></td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td class="text-center"><span class="glyphicon glyphicon-plus"></span></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td class="text-center"><span class="glyphicon glyphicon-plus"></span></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
<table>

尝试了很多方法，没有办法。我正在寻找一个简单的尽可能解决方案：高度：100％。

更新：预期结果：

Answer 1

简单的解决方案是在相对于父td的绝对定位的帮助下拉伸标签：

td {
    position: relative;
}
td > span.label {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
td > span.label:after {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

演示：http://jsfiddle.net/e27wut2p/4/

此外，我还使用span.label:after伪元素在标签内垂直对齐图标。

Answer 2

对于这种动态定位，您确实需要使用position: absolute。您可以使用保证金技巧来补充这一点。所以它不必适合100％的宽度（更像你的图像）。这更接近你正在寻找的东西吗？

.table > tbody > tr > td:first-child {
    position: relative;
}

.table > tbody > tr > td:first-child span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 2em;
    height: 85%;
}

.table > tbody > tr > td:first-child span.glyphicon {
    height: 2em;
    line-height: 2em;
}

http://jsfiddle.net/4LstLagu/