代码之家 › 专栏 › 技术社区 › TomáÅ¡ Zato

根据需要折叠表collum(最宽为最小宽度),以完全适合第一个collumn中的文本

css3 html5 css html

TomáÅ¡ Zato · 技术社区 · 6 年前

A 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;
}

<表>
<tr>
<td class=“no overflow”>非常重要的文本,请勿折叠!</td>
<!--这些列应始终折叠以适合重要文本-->
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td></tr>

</table>

所以要重申:折叠除第一列以外的所有列,以便适合第一列的文本。不要完全塌陷,保持 min-width: 2em 对于所有列。桌子如果具有固定宽度,则无法展开以适合列。

我没有主意了。我不想用javascript来做这个。

1 回复 | 直到 5 年前

TintinSansYeux 6 年前

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而不是表,然后取消设置最大宽度的重要td。