テーブルヘッダーセルを列と同じ幅に設定するにはどうすればよいですか？

Question

私はHandlebars.jsを使用しています.JSONファイルのデータが必要です。つまり、このテーブルは動的でなければなりません。

JSONファイルを正しく表示するようにテーブルを設定しましたが、ヘッダーと行を揃えることができないため、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; 
    } 

CSSファイルを配置することにより、このコードペン（http://codepen.io/OPaiTaCa/pen/rjowYm）

私はこれを固定することができると考えているに小規模な環境で問題を再現しました。

Answer 1

display: inlineとdisplay: block両方がthとテーブルレイアウトのために不可欠であるtrからデフォルトtable-cellプロパティを削除します。両方とも消去し、またfloat: leftを消去してください。この文脈では意味がありません。

追加：私はあなたのコードを最初に見ていませんでした：thのセルの数は、あなたの番号であるtdとは異なります。それは、すべての行（ヘッダを含む）のセル数と同じ数でなければならないか、複数の行にまたがるセルにはrowspanのアタリュートを使用する必要があります。