具有省略号故障的表格单元格

Question

我有一张表需要拉伸100％的页面。在调整浏览器大小时，第一列设置了文本内容的省略号。它工作正常，但表格单元格右侧有一个空白的200px块（宽度由我的CSS宽度计算结果确定为100％ - 200px）。

＆＃13;

＆＃13;

.ff_table {
	  width: 100%;
	}
	.ff_table_td1 {
	  display: block;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  width: calc(100% - 200px);
	}
	.ff_table_td2,
	.ff_table_td3 {
	  width: 100px;
	}

＆＃13;

<table class="ff_table" border="1">
  <tr>
    <td class="ff_table_td1">thequickbrownfoxjumpsoverthelazydogtwice</td>
    <td class="ff_table_td2">thequickbrown</td>
    <td class="ff_table_td3">thequickbrown</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我测试了它，我意识到你的问题是什么。

从width: calc(100% - 200px);

中删除空格

width: calc(100%-200px);

空间与CSS混乱。

然而，这仍然允许100％的细胞长度，因此你没有看到省略号。将width更改为90％，您会看到它仍在那里。

因此，您需要在ur css中使用称为媒体查询的内容。

@media all and (max-width: 480px) {
   .ff_table_td1 { width:200px; }
}

这允许您在浏览器低于特定宽度时更改列的宽度。你可以在那里放置你想要的任何条件。