为什么我的表格行不占用表格的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>

来源

2017-10-12 user13286

为什么不只是使用表？ –

在这种结构表头戏剧“表头”的作用，以便添加规则用于与该类的显示：表头组'和第二个用于”。 'table-body'与'display：table-row-group'

来源

2017-10-12 21:34:21 Joint

谢谢，这解决了我的对齐问题，但标题和正文中的前2个单元格似乎忽略了我分配给它们的宽度。 – user13286

在我看来他们有你设定的宽度：https://codepen.io/anon/pen/PJBLKP – Joint

同意其他评论。使用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>

来源

2017-10-12 21:44:19 WillW

为什么我的表格行不占用表格的100％宽度？

回答

相关问题