なぜ私のテーブルの行がテーブルの100％幅を占めていないのですか？

Question

私はdivを使ってCSSを使ってテーブルを作成しています。なんらかの理由で、行は100％の幅を占めていないので、見出しは整列していません。私の望む結果は、テーブルを100％幅にすることです。それから私はヘッダー/ボディの最初のコラムをその4％を占めるようにしたいと思います。ヘッダー/ボディーの2番目のコラムがその20％を占め、残りのコラムはすべて同じ幅でなければなりません。残りのスペースを取る。この構造で

.table { 
 
    display:table; 
 
    width:100%; 
 
} 
 
    .table-row { 
 
    display:table-row; 
 
    width:100%; 
 
    } 
 
    .table-row > div { 
 
     display:table-cell; 
 
    } 
 
     .table-row > div:first-child { 
 
     width:4%; 
 
     } 
 
     .table-row > div:nth-child(2) { 
 
     width:20%; 
 
     }

<div class="table"> 
 
\t <div class="table-header"> 
 
\t \t <div class="table-row"> 
 
\t \t \t <div></div> 
 
\t \t \t <div>Product Name</div> 
 
\t \t \t <div>Product Size</div> 
 
\t \t \t <div>Quantity</div> 
 
\t \t \t <div>Color</div> 
 
\t \t \t <div>Price</div> 
 
\t \t \t <div>Sub-Total</div> 
 
\t \t \t <div></div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="table-body"> 
 
\t \t <div class="table-row"> 
 
\t \t \t <div>1.</div> 
 
\t \t \t <div>Shirt</div> 
 
\t \t \t <div>Small</div> 
 
\t \t \t <div>3</div> 
 
\t \t \t <div>Blue</div> 
 
\t \t \t <div>$10</div> 
 
\t \t \t <div>$30</div> 
 
\t \t \t <div></div> 
 
\t \t </div> 
 
\t \t <div class="table-row"> 
 
\t \t \t <div>2.</div> 
 
\t \t \t <div>Pants</div> 
 
\t \t \t <div>Medium</div> 
 
\t \t \t <div>2</div> 
 
\t \t \t <div>Blue</div> 
 
\t \t \t <div>$40</div> 
 
\t \t \t <div>$80</div> 
 
\t \t \t <div></div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 1

テーブルヘッドの役割はそれほど 『ディスプレイ：テーブルヘッダグループ』でそのクラスのルールを追加「.tableヘッダを」再生「するための2つ目。 table-body 'と' display：table-row-group '

Answer 2

他のコメントに同意します。 tableを使用すると、シンプルさとアクセシビリティの両方を得ることができます（Googleと支援技術はそれをどのようにしてテーブルにするのでしょうか）。

divを使用するように設定されている場合は、 theadとtbody要素には、display: table-header-group;とdisplay: table-row-groupのスタイルがありませんでした。楽しい！

.table { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.table-row { 
 
    display: table-row; 
 
    width: 100%; 
 
} 
 

 
.table-header { 
 
    display: table-header-group; 
 
    } 
 
.table-body { 
 
    display: table-row-group; 
 
    } 
 

 
.table-row>div { 
 
    display: table-cell; 
 
    border: 1px solid #f2f2f2; /* Not necessary */ 
 
} 
 

 
.table-row>div:first-child { 
 
    width: 4%; 
 
} 
 

 
.table-row>div:nth-child(2) { 
 
    width: 20%; 
 
}

<div class="table"> 
 
    <div class="table-header"> 
 
    <div class="table-row"> 
 
     <div></div> 
 
     <div>Product Name</div> 
 
     <div>Product Size</div> 
 
     <div>Quantity</div> 
 
     <div>Color</div> 
 
     <div>Price</div> 
 
     <div>Sub-Total</div> 
 
     <div></div> 
 
    </div> 
 
    </div> 
 
    <div class="table-body"> 
 
    <div class="table-row"> 
 
     <div>1.</div> 
 
     <div>Shirt</div> 
 
     <div>Small</div> 
 
     <div>3</div> 
 
     <div>Blue</div> 
 
     <div>$10</div> 
 
     <div>$30</div> 
 
     <div></div> 
 
    </div> 
 
    <div class="table-row"> 
 
     <div>2.</div> 
 
     <div>Pants</div> 
 
     <div>Medium</div> 
 
     <div>2</div> 
 
     <div>Blue</div> 
 
     <div>$40</div> 
 
     <div>$80</div> 
 
     <div></div> 
 
    </div> 
 
    </div> 
 
</div>