為什么我的表格行不占用表格的100％寬度？

Question

我正在使用CSS從div中創建一個表。 由於某些原因，這些行不會占用100％的寬度，因此標題最終未對齊。 我想要的結果是使表格占據100％的寬度。 然后，我希望標題/正文的第一列占4％，而我希望標題/正文的第二列占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"> <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> 

Answer 1

同意其他意見。 使用table ，既簡單又可訪問（Google和輔助技術如何知道那是表格？）

如果您設置為使用div，則下面是一個解決方案。 您缺少display: table-header-group; 和display: table-row-group thead和tbody元素的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> 

Answer 2

在此結構中，表頭的角色扮演“ .table-header”，因此為帶有“ display：table-header-group”的該類添加規則，為“ .table-body”添加“ display：table-row-group”的第二個規則'