Question

所以说我有以下HTML：

<table>
  <tr>
    <th>Heading:</th><td>text</td>
  </tr>
  <tr>
    <th>Heading 2:</th><td>text</td>
  </tr>
  <tr>
    <th colspan="2">Really long heading:</th>
  </tr>
  <tr>
    <td></td><td>text</td>
  </tr>
</table>

这将创建一个包含两列的表，一列用于标题（左侧），另一列用于值（右侧） - 除了一行，其中一个长标题占据两列，并且该值显示在最右侧的列中在下一行。除此之外，我还有一些造型;最重要的是：

td:last-child {
  width: 100%;
}

th, td {
    white-space:nowrap;
}

这使得最右边的列占用了任何额外的空间。我所拥有的就是工作，即使这很长很长。标题比标题列更长/更宽。但是，当我在真正长的标题中添加一些单词（但没有足够长以增加整个表的宽度）时，在某一点之后，左列的宽度开始随着长度的长度而增加标题，减小右列的宽度。发生了什么事？

Answer 1

您无法定义宽度：100％具有多列的表格的单元格。您应该使用colgroup标签来定义单元格的宽度：

＆＃13;

.col-left {
  width: 20%;
}
.col-right {
  width: 80%;
}

＆＃13;

 <table>
  <colgroup>
    <col class="col-left">
    <col class="col-right">
  </colgroup>
  <tr>
    <th>Heading:</th><td>text</td>
  </tr>
  <tr>
    <td colspan="2">Really long heading:</td>
  </tr>
   <tr>
    <th>lorem  ispum dolores hello</th><td>text</td>
  </tr>
</table>

＆＃13;

将细胞设置为最小值并且显然另一个细胞占据宽度的其余部分的另一个技巧是将第一个设置为1px：

＆＃13;

table {
    width: 200px;
}
th, td {
    border: 1px solid #000;
}
th {
    width:1px;
}

＆＃13;

<table>
    <tr>
        <th>hello</th>
        <td>world</td>
    </tr>
    <tr>
        <td colspan="2">hi</td>
    </tr>
    <tr>
        <td></td>
        <td>text</td>
    </tr>
</table>

＆＃13;

HTML表格格式：2个colspan单元格混乱列宽

1 个答案: