强制 TD 内 DIV 的高度相等

Question

我正在使用表格布局来表示数据：

问题是根据设计，我必须在单元格之间放置这些分隔边界。

除了在td 元素中使用div 元素（如果我弄错了，请纠正我，应该不会造成问题），我没有看到任何其他方法。

示例

<table>
    <tr>
       <td>
          <div class="inner">
             Content
          </div>
       </td>
    </tr>
</table>

CSS

table td {
    padding: 15px 10px;
    border-bottom: 1px solid #e5e5e5;
}

table td div.inner {
    padding: 10px 25px 10px 0;
    border-right: 1px solid #e5e5e5;        
}

效果相当好 - 您在镜头中看到的是浏览器中的实际渲染。

但是当你仔细观察时，你会注意到垂直线（div.inner 的 border-right 属性具有不同的高度。这当然是有道理的，我理解它为什么会发生。里面的内容div.inner 会增加它的高度，加上padding。

我尝试将固定高度设置为div.inner，这对我的表来说没问题，因为我确切地知道我将代表多少数据并且它永远不会超过某个高度。但是这样做时，div.inner 中的所有内容都会垂直对齐到顶部，这意味着我的td 元素的自然应用的vertical-align 属性不再影响div.inner 中的内容。

我尝试将display: inline-block 应用于div.inner 以触发垂直居中对齐，这会导致宽度发生变化。所以我也添加了width: 100%，这导致水平轴不对齐（文本重叠边框），最后没有显示关于垂直对齐的预期结果。所以这种做法是徒劳的。

我怎样才能使这些垂直分隔线的高度相等？

或者，或者，...

在div.inner 上使用固定高度时，如何强制所有内容垂直对齐？

请注意： 以任何方式使用line-height 来实现（或尝试）结果对我来说不是一个选择。正如您在屏幕截图中看到的，我正在显示一个进度条。这在div.inner 中包含更多元素。

Answer 1

我不知道您需要支持哪种浏览器，但我的解决方案需要浏览器支持:before 或:after 伪元素，以及支持:last-child（或任何CSS3）选择器。

目前全球统计数据指向：

• 84.9% 的总支持 + 7.56% 的部分支持用于 CSS 生成的内容。 Source
• 84.79% 支持 CSS3 选择器。 Source

因此重要的是，不可能实现完美的跨浏览器兼容性，尤其是在考虑过时的浏览器时，但这只会影响布局，而不影响您网站的功能;)

我的解决方法是将每个表格单元格的位置设置为relative，然后添加一个右边框宽度为1px且绝对定位在每个单元格内的伪元素：

table td {
    padding: 15px 10px;
    position: relative;
    border-bottom: 1px solid #e5e5e5;
}
table td:before {
    border-right: 1px solid #e5e5e5;
    content: ""; /* Need to declare content, even when empty! */
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 10px;
    width: 0;
}
    /* Optional, only if you want to                */
    /* remove border on last td element on each row */
    table td:last-child:before {
        display: none;    
    }

在此处查看工作小提琴（在 Chrome、Safari 和 Firefox 中测试）：http://jsfiddle.net/teddyrised/e4LXY/

这种方法的优点是它在大多数现代浏览器中得到广泛支持，并且由于:before伪元素被添加到表格单元格而不是内部div，它会随着最终计算的高度进行拉伸行，因此确保它们的高度相同。小提琴演示了内容可以是可变高度的。

唯一的缺点是对于不支持 CSS 生成内容和/或 CSS3 选择器的浏览器没有向后兼容性。您可能需要考虑为旧版浏览器上的访问者使用后备样式（例如，整个表格的实线边框）。

Answer 2

我在菜单上有类似的问题，这是我解决它的 CSS 魔法：

HTML：

<table>
    <tr>
       <td>
          <div class="inner">
             Content
          </div>
       </td>
        <td>
          <div class="inner">
              <span style="font-size:40px;">AAAA</span>
          </div>
       </td>
        <td>
          <div class="inner">
              <span style="font-size:8px;">asd</span>
          </div>
       </td>
    </tr>
</table>

CSS：

   table td {
    padding: 15px 10px;
    border-bottom: 1px solid #e5e5e5;
}

table td div.inner {
    padding: 10px 25px 10px 0;
    position: relative;
}
table td div.inner:after {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    margin-bottom: -20px;
    margin-left: 23px;
    height:40px;
    width: 1px;
    content: "";
    background-color: #e5e5e5;
}

jsfiddle：http://jsfiddle.net/xJj2y/

Answer 3

我认为在 div 上设置一个固定高度并在 td 上垂直对齐中间将解决它。用一些虚拟行发布一个小提琴，这会有所帮助。