如何设置表格标题单元格与列具有相同的宽度？

问题描述：

我正在使用Handlebars.js，需要来自JSON文件的数据，这意味着此表必须是动态的。如何设置表格标题单元格与列具有相同的宽度？

我已经配置了表格以正确显示JSON文件，但是，我遇到了一些CSS问题，因为我无法将这些标题与行对齐。我已经安排了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; 
    }

任何帮助，将不胜感激重现该问题上的一个小环境，在这个准则笔（http://codepen.io/OPaiTaCa/pen/rjowYm）

我相信这可以修复的。

尝试从CSS中删除浮动和显示行。 – ceruleus

谢谢你的回复你是什么意思的故障磁头块？ ceruleus，如果我这样做，它会停止正确显示数据。 –

请在问题中提供[mcve]中的所有相关代码，而不要在第三方网站上提供。 –

答

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

附加信息：我没有首先查看您的codepen：您的th单元格数与每行的td数不同。它必须在每行（包括标题）中的单元格数量/数量相同，或者必须使用应该跨越多行的单元格的属性。

如何设置表格标题单元格与列具有相同的宽度？

相关推荐