html - 根据需要折叠表格列(最大宽度)以完全适应第一列中的文本

Question

我正在努力满足以下要求:

固定宽度 HTML 表格应该有多个列。第一列中的信息是最优先的，应该始终可见。其余列应始终减小其宽度，以便第一列单元格中的文本始终可见。

我设法制作了一个保持固定宽度并折叠列以适合的表格:

table {
  width: 200px;
  max-width: 200px;
  table-layout:fixed;
}
td:nth-child(even) {
  background-color: #EEE;
}
td {
  text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<table>
<tr>
<td>Very important text, do not collapse!</td>
<!-- These columns should always collapse to fit the important text -->
<td>aaaa aaaa aaaa aaa aaa aaa</td>
<td>aaaa aaaa aaaa aaa aaa aaa</td></tr>

</table>

此表均匀折叠所有列，这不是我想要的。我试图禁用第一列的溢出:

table {
  width: 200px;
  max-width: 200px;
  table-layout:fixed;
}
td:nth-child(even) {
  background-color: #EEE;
}
td {
  text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
td.no-overflow {
  overflow: initial;
}

<table>
<tr>
<td class="no-overflow">Very important text, do not collapse!</td>
<!-- These columns should always collapse to fit the important text -->
<td>aaaa aaaa aaaa aaa aaa aaa</td>
<td>aaaa aaaa aaaa aaa aaa aaa</td></tr>

</table>

不确定是否所有浏览器都显示相同，但​​在 Firefox 中，这显示第一列在其余列之上并在表格之外 - 文本在元素之外自由流动。

我也试过:

• width: auto;, width: fill; 在第一列。这没有任何效果，列的大小保持均匀。

• width: -moz-max-content; 有效，但所有其他列完全消失。 min-width 被忽略

  table {
    width: 200px;
    max-width: 200px;
    table-layout:fixed;
  }
  td:nth-child(even) {
    background-color: #EEE;
  }
  td {
    text-overflow:ellipsis;
    overflow: hidden;
    white-space: nowrap;
    min-width:2em;
  }
  td.no-overflow {
    width: -moz-max-content;
    width: -webkit-max-content;
  }

  <table>
  <tr>
  <td class="no-overflow">Very important text, do not collapse!</td>
  <!-- These columns should always collapse to fit the important text -->
  <td>aaaa aaaa aaaa aaa aaa aaa</td>
  <td>aaaa aaaa aaaa aaa aaa aaa</td></tr>
  
  </table>

因此重申:折叠除第一列以外的所有列以适合第一列的文本。不要完全折叠，为所有列保持 min-width: 2em。表格必须具有固定宽度，不能扩展以适应列。

我没主意了。我不想为此使用 javascript。

Answer 1

table {
  width: auto;
  table-layout:fixed;
}
td:nth-child(even) {
  background-color: #EEE;
}
td {
  text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width:60px;
}
td:first-child {
  max-width:none;
}

<table>
<tr>
<td>Very important text, do not collapse!</td>
<!-- These columns should always collapse to fit the important text -->
<td>aaaa aaaa aaaa aaa aaa aaa</td>
<td>aaaa aaaa aaaa aaa aaa aaa</td></tr>

</table>

这项工作，在 td 而不是 table 上设置最大宽度，然后在重要的 td 上取消设置最大宽度。