1

我有一些 HTML 想要使用 display: table css 属性来控制。不幸的是，我实际上无法更改 HTML（或 JS），只能更改 CSS（长篇大论）。这是一个问题，因为现有 HTML 的结构给表格布局带来了麻烦。这是 HTML 和 CSS 的简化版本：

<style>
    .like-table { display: table;}
    .like-tr { display: table-row;}
    .like-th { display: table-cell; border: 1px solid gray;}
    .useless-div-1 { }
    .useless-div-2 { }
    .like-td { display: table-cell; border: 1px solid gray;}
</style>
<div class="like-table">
    <div class="like-tr">
        <div class="like-th">1</div>
        <div class="like-th">22</div>
        <div class="like-th">3</div>
    </div>
    <div class="useless-div-1"><div class="useless-div-2">
        <div class="like-tr">
            <div class="like-td">111</div>
            <div class="like-td">2</div>
            <div class="like-td">3</div>
        </div>
        <div class="like-tr">
            <div class="like-td">11</div>
            <div class="like-td">2</div>
            <div class="like-td">333</div>
        </div>
    </div></div>
</div>

可悲的是，这使得标题和正文列的宽度不同：

在此处输入图像描述

如果我删除“useless-div-*”打开和关闭标签：

<div class="like-table">
    <div class="like-tr">
        <div class="like-th">1</div>
        <div class="like-th">22</div>
        <div class="like-th">3</div>
    </div>
    <div class="like-tr">
        <div class="like-td">111</div>
        <div class="like-td">2</div>
        <div class="like-td">3</div>
    </div>
    <div class="like-tr">
        <div class="like-td">11</div>
        <div class="like-td">2</div>
        <div class="like-td">333</div>
    </div>
</div>

然后它呈现精细，对齐标题和正文列宽：

在此处输入图像描述

那么，我可以对 CSS 做些什么来使第一组 HTML 表现得像第二组一样吗？ 请记住，我不能修改 HTML 或 JavaScript——只能修改 CSS！请不要问为什么...

单击此处修改代码。

4

1 回答 1

3

由于您table-row通过 包装元素useless-div，您可以简单地将display属性设置useless-div为table-row-group：

.useless-div { display: table-row-group; }

在 CSS 表格布局中，所有元素都应遵循相同的结构属性。

这是JSBin 演示。

更新

在过去的 5 个小时里为此挠头后，我意识到用目前的方式处理这个是不可能的。

因此，我决定编写新样式来创建灵活的 CSS 表格。但我首先要提几点：

  • 要保持列垂直对齐，需要为单元格设置特定宽度。
  • 在下面的示例中，我设置了边框以更好地显示表格。因此，我使用box-sizing属性来强制浏览器计算每个单元格的宽度，包括它的填充和边框。如果您不需要border，请删除它和该border-box属性。

该方法

.like-table {
  width: 400px;    /* You could declare a specific width. Your choice */
  margin: 0 auto;
}

.like-th, .like-td {
  float: left;    /* <--  Float the cells to stick together                    */
  width: 33.33%;  /* <--  I applied the same width on each cell.               */
  /* I've explained how to set specific width for each column in the following */

  border: 1px solid gray;          /* Add border around each cell */

  -webkit-box-sizing: border-box;  /* Force browser to calculate width+borders */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.like-tr:after { /* Clearfix hack */
  content: ' ';
  font: 0/0 a;
  display: block;
  clear: both;
}

注意：要在每列（左 + 中心 + 右）上应用特定宽度，首先像我在上面所做的那样在每个单元格上设置 a，然后使用以下选择器width覆盖左右 列的应用宽度：

.like-table .like-td:first-child, /* Selectors for the left column */
.like-table .like-th:first-child { 
  width: 100px;     /*  <-- Override the width for the left column */
  border-right: 0;  /* You might also want to remove right borders */
}

.like-table .like-td:last-child,  /* Selectors for the right column */
.like-table .like-th:last-child {
  width: 100px;      /* <-- Override the width for the right column */
  border-left: 0;    /* You might also want to remove left borders  */
}

JSBin 演示 #1。（流体宽度）

JSBin 演示 #2。（固定宽度）

于 2013-08-29T17:00:11.423 回答