thead 中的两行，无法在第二个中设置列宽

Question

我有一个包含两行标题的 table。我想设置第二行中列的 some 的宽度。我设置了一个 Codepen 来测试它。我发现如果我删除第一行标题，它会毫无问题地采用我指定的列宽。但是对于第一行标题，它忽略了第二行中列的宽度。 :(

请注意，我在 th 中有 div，所以我可以设置边框样式。

代码如下：

body {
  padding: 10px;
}

.data-table {
  width: 100%;
  border-spacing: 0 4px;
  border-collapse: separate;
  table-layout: fixed;
}/* Remove For SCSS*/
  .title-11, .title-21 {
    width: 40px;
  }
  .title-22 {
    width: 100px;
  }
  .title-24 {
    width: 100px;
  }

  thead tr th {
    border-collapse: separate; 
    border-spacing: 0 5px;
  }
   .title {
     /*
     background: linear-gradient(to right, transparent 0%, #bbb 0%,
       #bbb calc(100% - 10px), 
       transparent calc(100% - 10px)) 0 99% / 100% 1px 
       no-repeat; 
     */
     text-align: left; 
     padding-right: 10px;
  }

  .div-title {
    border-bottom: 1px solid #bbb;
  }
  .hdr-field {
    width: 150px;
  }
  tr .title:last-child {
    padding-right: 0;
  }
  .side-title {
    transform: rotate(-90deg);
    width: 25px;
  }
  .fieldname {
    width: 130px;
  }
  .fieldvalue.dest-data input[type=text] {
    width: 100%;
  }
  .bodySection {
    border-bottom: 10px solid #bbb;
    margin-bottom: 10px;
  }
  tr {
    // border-bottom: 10px solid #bbb;
  }
/*}*//* For SCSS*/

<table class="data-table">
  <thead>
    <tr>
      <th class="title-11"></th>
      <th colSpan="2" class="title title-12">
        <div class="div-title">Source</div>
      </th>
      <th colSpan="2" class="title title-13">
        <div class="div-title">Destination</div>
      </th>
    </tr>
    <tr>
      <th class="title-21"></th>
      <th colSpan="1" class="fieldname title title-22">
        <div class="div-title hdr-field">Field</div>
      </th>
      <th colSpan="1" class="title title-23">
        <div class="div-title">Value</div>
      </th>
      <th colSpan="1" class="fieldname title title-24">
        <div class="div-title hdr-field">Field</div>
      </th>
      <th colSpan="1" class="title title-25">
        <div class="div-title">Value</div>
      </th>
    </tr>
  </thead>
  <tbody class="bodySection">
    <tr>
      <td rowSpan="2" class="side-title">Name</td>
      <td class="fieldname src-data">Short Name</td>
      <td class="fieldvalue src-data"My Store/td>
      <td class="fieldname dest-data">Short Name</td>
      <td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
    </tr>
    <tr>
      <td class="fieldname src-data">Long Name</td>
      <td class="fieldvalue src-data"My Store/td>
      <td class="fieldname dest-data">Long Name</td>
      <td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
    </tr>
  </tbody>
  <tbody class="bodySection">
    <tr>
      <td rowSpan="2" class="side-title">Name2</td>
      <td class="fieldname src-data">Short Name2</td>
      <td class="fieldvalue src-data"My Store/td>
      <td class="fieldname dest-data">Short Name2</td>
      <td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
    </tr>
    <tr>
      <td class="fieldname src-data">Long Name2</td>
      <td class="fieldvalue src-data"My Store/td>
      <td class="fieldname dest-data">Long Name2</td>
      <td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
    </tr>
  </tbody>
</table>

所以只是澄清一下：问题是如何使 Field 列固定宽度，同时让 Value 列找到自己的级别。

谢谢。

Answer 1

我不太明白为什么和如何计算table布局，因为the algorythm seems pretty complex.

但是，您可以通过使用好的 ol'<colgroup> 来实现所需的布局。在 HTML4 spec | Calculating column width 中有一些不太难理解的关于如何使用它们的信息。请注意，这也适用于新规范（不推荐使用 col 和 colgroup）。

把这个放在 <table> 和 <thead> 之间，在你的 fiddle:

<colgroup>
  <col>
  <col width="150">
  <col>
  <col width="150">
  <col>
</colgroup>

演示工作：

body {
  padding: 10px;
}

.data-table {
  width: 100%;
  border-spacing: 0 4px;
  border-collapse: separate;
  table-layout: fixed;
}/* Remove For SCSS*/
  .title-11, .title-21 {
    width: 40px; /* Wont be applied */
  }
  .title-22 {
    width: 100px; /* Wont be applied */
  }
  .title-24 {
    width: 100px; /* Wont be applied */
  }

  thead tr th {
    border-collapse: separate; 
    border-spacing: 0 5px;
  }
   .title {
     /*
     background: linear-gradient(to right, transparent 0%, #bbb 0%,
       #bbb calc(100% - 10px), 
       transparent calc(100% - 10px)) 0 99% / 100% 1px 
       no-repeat; 
     */
     text-align: left; 
     padding-right: 10px;
  }

  .div-title {
    border-bottom: 1px solid #bbb;
  }
  .hdr-field {
    width: 150px;
  }
  tr .title:last-child {
    padding-right: 0;
  }
  .side-title {
    transform: rotate(-90deg);
    width: 25px;
  }
  .fieldname {
    width: 130px;
  }
  .fieldvalue.dest-data input[type=text] {
    width: 100%;
  }
  .bodySection {
    border-bottom: 10px solid #bbb;
    margin-bottom: 10px;
  }
  tr {
    // border-bottom: 10px solid #bbb;
  }
/*}*//* For SCSS*/

<table class="data-table">
  <colgroup>
    <col width="40">
    <col width="100">
    <col>
    <col width="100">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th class="title-11"></th>
      <th colSpan="2" class="title title-12">
        <div class="div-title">Source</div>
      </th>
      <th colSpan="2" class="title title-13">
        <div class="div-title">Destination</div>
      </th>
    </tr>
    <tr>
      <th class="title-21"></th>
      <th class="fieldname title title-22">
        <div class="div-title hdr-field">Field</div>
      </th>
      <th class="title title-23">
        <div class="div-title">Value</div>
      </th>
      <th class="fieldname title title-24">
        <div class="div-title hdr-field">Field</div>
      </th>
      <th class="title title-25">
        <div class="div-title">Value</div>
      </th>
    </tr>
  </thead>
  <tbody class="bodySection">
    <tr>
      <td rowSpan="2" class="side-title">Name</td>
      <td class="fieldname src-data">Short Name</td>
      <td class="fieldvalue src-data"My Store/td>
      <td class="fieldname dest-data">Short Name</td>
      <td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
    </tr>
    <tr>
      <td class="fieldname src-data">Long Name</td>
      <td class="fieldvalue src-data"My Store/td>
      <td class="fieldname dest-data">Long Name</td>
      <td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
    </tr>
  </tbody>
  <tbody class="bodySection">
    <tr>
      <td rowSpan="2" class="side-title">Name2</td>
      <td class="fieldname src-data">Short Name2</td>
      <td class="fieldvalue src-data"My Store/td>
      <td class="fieldname dest-data">Short Name2</td>
      <td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
    </tr>
    <tr>
      <td class="fieldname src-data">Long Name2</td>
      <td class="fieldvalue src-data"My Store/td>
      <td class="fieldname dest-data">Long Name2</td>
      <td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
    </tr>
  </tbody>
</table>

thead 中的两行，无法在第二个中设置列宽

Two Rows in thead, Can't Set Column Widths in Second

html-table

column-width

演示工作：