Html div表列宽不小于'；不匹配行

在一个简单的div表上花费了太多的时间。问题：列标题无法调整为表或行的宽度。行显示正常，但列标题不正常

试图避免使用固定宽度，因为我发布的下一个表可能有不同的列数。在下面的代码中，列标题都向左紧靠着，但它们与行不匹配

 <style type="text/css">

.table-container {
    display: table;
    width: 50%;
    table-layout: fixed;
    border-collapse: collapse;
}

.table-heading {
    font-weight: bold;
    display: table-caption;
    background-color: #e9e9e9;
    text-align: center;
    padding: 8px;
    line-height: 21px;
    font-size: 18px;
    color: #CA8327;
}

.table-row {
    display: table-row;
    text-align: center;
}

.table-row-shade {
    display: table-row;
    text-align: center;
    background-color: #e9e9e9;
}

.table-col {
    display: table-cell;
    text-align: center;
    border: 1px solid #ca8327;
}

</style>

<div class="table-container">
  <div class="table-heading">Approximate Dimensions (inches)</div>
   <div class="table-col">
    <div class="table-col">size</div>
    <div class="table-col">head strap (inc. frame)</div>
    <div class="table-col">chin strap</div>
    <div class="table-col">lbs.*</div>
   </div>  
  <div class="table-row-shade">
    <div class="table-col">XXS</div>
    <div class="table-col">3-9 inches</div>
    <div class="table-col">2-3 inches</div>
    <div class="table-col">< 5 lbs*</div>
  </div>
    <div class="table-row">
    <div class="table-col">XS</div>
    <div class="table-col">5-13 inches</div>
    <div class="table-col">3-7 inches</div>
    <div class="table-col">5 - 10lbs*</div>
  </div>
</div>

.桌上容器{
显示：表格；
宽度：50%；
表布局：固定；
边界塌陷：塌陷；
}
.表格标题{
字体大小：粗体；
显示：表格标题；
背景色：#e9e9e9；
文本对齐：居中；
填充：8px；
线高：21px；
字号：18px；
颜色：#CA8327；
}
.表格行{
显示：表格行；
文本对齐：居中；
}
.桌排灯罩{
显示：表格行；
文本对齐：居中；
背景色：#e9e9e9；
}
.表列{
显示：表格单元格；
文本对齐：居中；
边框：1px实心#ca8327；
}
近似尺寸（英寸）
大小
头部束带（包括框架）
颐革
磅*
XXS
3-9英寸
2-3英寸
<5磅*
XS
5-13英寸
3-7英寸
5-10磅*

试试这个

这是因为你把类“table col”放在了标题旁边。将其更改为“表行”，问题就解决了

<div class="table-row">
   <div class="table-col">size</div>
   <div class="table-col">head strap (inc. frame)</div>
   <div class="table-col">chin strap</div>
   <div class="table-col">lbs.*</div>
</div>  

大小
头部束带（包括框架）
颐革
磅*

您只放置表格列而不是表格行

<div class="table-container">
  <div class="table-heading">Approximate Dimensions (inches)</div>
   <div class="table-row"> <!-- must be a table-row -->
    <div class="table-col">size</div>
    <div class="table-col">head strap (inc. frame)</div>
    <div class="table-col">chin strap</div>
    <div class="table-col">lbs.*</div>
   </div>  
  <div class="table-row-shade">
    <div class="table-col">XXS</div>
    <div class="table-col">3-9 inches</div>
    <div class="table-col">2-3 inches</div>
    <div class="table-col">< 5 lbs*</div>
  </div>
    <div class="table-row">
    <div class="table-col">XS</div>
    <div class="table-col">5-13 inches</div>
    <div class="table-col">3-7 inches</div>
    <div class="table-col">5 - 10lbs*</div>
  </div>
</div>

近似尺寸（英寸）
大小
头部束带（包括框架）
颐革
磅*
XXS
3-9英寸
2-3英寸
<5磅*
XS
5-13英寸
3-7英寸
5-10磅*