表列宽度与行不匹配

Question

把太多的时间花在一个简单的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>

http://jsfiddle.net/Speedy1/t3e3ken6/

Answer 1

您只放置table-col而不是表行。

<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>

http://jsfiddle.net/vgjb578s/

Answer 2

试试这个http://jsfiddle.net/t3e3ken6/1/

这是因为你把班级的“餐桌”放在标题旁边。将其更改为“表行”，问题就解决了。

<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>