为什么我的表格行不占用表格的100％宽度？
问题描述：
我使用CSS创建了一个使用div的表格。出于某种原因，这些行不占用100％的宽度，所以标题最终会不一致。我希望的结果是让桌子占用100％的宽度。然后，我希望标题/正文的第一列占用4％，我希望标题/正文的第二列占用20％，然后剩下的列应该都是相同的宽度，并且占用剩余的空间。为什么我的表格行不占用表格的100％宽度？
.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>
答
同意其他评论。使用table，既简单又方便（谷歌和辅助技术如何知道这是一个表？）
如果你设置使用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>
为什么不只是使用表？ –