Question

我正在使用Handlebars.js，需要来自JSON文件的数据，这意味着该表必须是动态的。

我已经将表配置为正确显示JSON文件，但是，我遇到了一些CSS问题，因为我无法将标题与行对齐。我已经在此代码笔（http://codepen.io/OPaiTaCa/pen/rjowYm）

中的小环境中重现了该问题

我相信这可以通过安排CSS文件

来解决

    table.content {
      width: auto;
      border: 1px solid black;
    }

    th {
      border: 2px solid black;
      display: inline;
    }

   tbody tr {
      float: left;
    }

    tbody td {
      display: block;
      border: 1px solid black;
    }

任何帮助都将不胜感激。

Answer 1

display: inline和display: block都会删除table-cell和th的默认tr属性，这对于表格布局至关重要。擦除两者，也擦除float: left - 在这种情况下它没有意义。

附加：我没有先看过您的codepen：th单元格的数量与每行td的数量不同。它要么必须是每行中相同数量/数量的单元格（包括标题），要么必须对应该跨越多行的单元格使用rowspan attrubutes。

如何将表头单元格设置为与列具有相同的宽度？

1 个答案: