一次table文字溢出显示省略号问题

今天在做一个table表格的时候，遇到一个css样式问题：

如下图：

从图中可以看到，在table里面，th 的文字太长了。

我们知道。如果想要显示省略号会使用下面三行代码：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

使用这三行代码的话，需要设置一个宽度：

width: 100px;

但是，由于th是行内元素，直接设置width是无效的。必须加入:

display: block; 
或者 
display: inline-block;

因为想让所有的th都一行排列，所以应该加入display:inline-block但是加入后却换行显示了：

怎么回事呢？inline-block 不是变成行内块的形式一行显示吗？

经过查询知道，inline-block是包含空格、换行符的，所以会导致inline-block产生间距，即会出现换行。

如何处理呢？

解决办法：

table 设置属性宽度和 table-layout:fixed;

table {  
  width: 100%;
  table-layout:fixed;
}

注意：table必须设置 table-layout:fixed; ，文字溢出省略才能生效；

然后，th再进行如下设置即可：

th {  
  width: 100px;  
  display: inline-block;  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;
}

（完）

---

对了，看完文章，记得点击下面的卡片。

关注我哦~????????????

你的每个赞和在看，我都当成了喜欢！