Question

我的用户将使用从11'到15'的监视器访问我的网页，因此我希望我的页面适应屏幕分辨率。

我有一个table，其中有几列。随着屏幕宽度变小，列可以按照我指定的顺序缩小到ellipsis（第一个单词带有3个点）。

例如，我有一个table的{{1}}，其中有列Employee，id，name，department，{{1} }和title。

随着屏幕宽度变小，我希望列manager首先缩小，而其他列则保持不变，直到最小宽度on-board date为止。然后，on-board date列缩小，然后ellipsis列缩小。

希望我可以在没有媒体查询的情况下实现这一目标。

Answer 1

您需要在跨度内将delete内的文本换行，以使省略号生效。此外，您还需要设置Point points[RANDOM_POINTS];，以便为所有列设置固定的表/单元格宽度。

请参见下面的示例

<td>

table-layout:fixed

如果要根据列顺序调整表格宽度，则可以使用CSS伪类。例如，使用它来增加第二列的宽度

table{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
max-width: 100%; /*Remove if not required*/
}
table td, table th{
  border: 1px solid #ccc;
}
table td span{
display: block;
text-overflow: ellipsis;
  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

您还可以使用CSS flex框来处理表格布局调整。

如何有序收缩表列

1 个答案: