如何設置表格標題單元格與列具有相同的寬度？

我正在使用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）

我相信這可以修復的。

來源

2017-02-12 David Morales

嘗試從CSS中刪除浮動和顯示行。 – ceruleus

謝謝你的回覆你是什麼意思的故障磁頭塊？ ceruleus，如果我這樣做，它會停止正確顯示數據。 –

請在問題中提供[mcve]中的所有相關代碼，而不要在第三方網站上提供。 –

display: inline和display: block都從th和tr刪除對錶格佈局至關重要的默認table-cell屬性。擦除兩者，並且也擦除float: left - 在這種情況下這沒有意義。

附加信息：我沒有首先查看您的codepen：您的th單元格數與每行的td數不同。它必須在每行（包括標題）中的單元格數量/數量相同，或者必須使用應該跨越多行的單元格的屬性。

來源

2017-02-13 20:01:29 Johannes

如何設置表格標題單元格與列具有相同的寬度？

回答

相關問題