Question

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

Table layout screenshot

问题是根据设计，我必须在细胞之间放置这些分离边界。

除了在div元素中使用td元素之外，我认为没有办法实现这一点（如果我弄错了 - 纠正我 - 不应该造成问题）。

示例

<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;        
}

它运作得相当好 - 你在镜头中看到的是浏览器中的实际渲染。

但是当你仔细观察时，你会注意到垂直线（border-right div.inner属性的高度不同。这当然是有道理的，我明白为什么会发生这种情况div.inner中的内容会导致它增加高度，添加padding。

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

我尝试将display: inline-block应用于div.inner以触发垂直居中对齐，然后导致宽度变化。所以我也添加width: 100%，然后导致水平轴上的错位（文本重叠的边框），最后没有显示关于垂直对齐的所需结果。所以这种方法毫无结果。

如何使这些垂直分隔线的高度相等？

或者，或者......

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

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

Answer 1

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

目前全球统计数据指向：

CSS生成内容的总支持率为84.9％，部分支持率为7.56％。 Source
84.79％支持。 Source

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

我的解决方案是将每个表格单元格的位置设置为:last-child，然后添加一个伪元素，其宽度为1px的右边界绝对位于每个单元格内：

relative

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

这种方法的优点在于它在大多数现代浏览器中得到广泛支持，并且由于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; }伪元素被添加到表格单元而不是内部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上做一个垂直对齐中间将修复它。发布一些虚拟行，可以提供帮助。

在TD内的DIV上强制相等的高度

3 个答案: