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

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

这是因为您已将“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>

Answer 2

你只放了table-col而不是table-row

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

div表列宽与行不匹配

2 个答案: