使用比表本身更宽的表创建一个表

Question

我有一个非常基本的表格，由3行3列组成，我试图让它看起来像这张图片

（也就是说，thead应该比其他行宽）。我如何实现这种效果？我试过colspan，但我无法做到。基本表类似于：

 <table>
   <thead>
   <tr>
   <th>Extra details</th>
   </tr>
   </thead>
   <tbody>
   <tr>
   <td>A</td>
   <td>B</td>
   <td>C</td>
   </tr>
   <tr>
   <td>A</td>
   <td>B</td>
   <td>C</td>
   </tr>
   <tr>
   <td>A</td>
   <td>B</td>
   <td>C</td>
   </tr>
   </tbody>
 </table> 

谢谢！

Answer 1

您需要将colspan="3"添加到th（tr中所有table中的列数必须相同。然后让每个td中的每个tr比前两个更宽{使用:last-child伪选择器，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child）。

＆＃13;

＆＃13;

table {
  width: 100%;
}
thead th {
  background-color: #ddd;
}
td:last-child {
  width: 60%;
}

＆＃13;

<table>
  <thead>
    <tr>
      <th colspan="3">Extra details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以使用colspan并添加一个50％宽度的虚拟col col：

＆＃13;

＆＃13;

tbody tr:after {
  content: '';
  display: table-cell;
  width:50%
}
th {
  background: gray;
  border: solid;
}
table {
  width: 100%;
}

＆＃13;

<table>
  <thead>
    <tr>
      <th colspan="4">Extra details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用caption元素，该元素跨越table的宽度，并且在您的情况下在语义上更正确，因为它描述了整个表。然后使用伪元素填充行中的剩余空间并折叠其他列。

table {
  width: 100%;
}

caption {
  border: 2px solid darkgray;
  background-color: lightgray;
}

tr:after {
    display: table-cell;
    content: "";
    width: 100%;
}

<table>
   <caption>Extra details</caption>
   <tbody>
   <tr>
   <td>A</td>
   <td>B</td>
   <td>C</td>
   </tr>
   <tr>
   <td>A</td>
   <td>B</td>
   <td>C</td>
   </tr>
   <tr>
   <td>A</td>
   <td>B</td>
   <td>C</td>
   </tr>
   </tbody>
 </table>