CSS table表格消除边框和表格中省略号隐藏超长文本

最新推荐文章于 2024-10-02 09:25:25 发布

SamXCode

最新推荐文章于 2024-10-02 09:25:25 发布

阅读量4.2k

点赞数

分类专栏： HTML/JS 文章标签： HTML css 省略号边框隐藏文本

本文链接：https://blog.csdn.net/samxie0816/article/details/42719235

版权

HTML/JS 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何使用CSS来控制表格的cellspacing和cellpadding，通过设置`border-collapse:collapse`和`border-spacing:0`来消除边框。同时，针对表格中的超长文本，利用`white-space:nowrap`防止文本换行，结合`overflow:hidden`和`text-overflow:ellipsis`实现隐藏并显示省略号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css中并没有cellspacing和cellpadding，可以用这些代替：

/*控制cellpadding*/

table{border:0;margin:0;border-collapse:collapse;border-spacing:0;}

/*控制cellpadding*/
table td{padding:0;}

说明：

border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

border-collapse的值定义：

值	描述
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit	规定应该从父元素继承 border-collapse 属性的值。

table中要设置长文本省略号隐藏，
首先table的样式中添加：table-layout:fixed;
在td中添加

white-space:nowrap 文本不换行

overflow:hidden;

text-overflow:ellipsis; 省略号

<pre name="code" class="html"><span style="font-family: Arial, Helvetica, sans-serif;">.main-table {</span>

	width:1070px;
	border:none;
	text-align: center;
	border-collapse: collapse;
	table-layout: fixed;
}

.main-table tbody td {
    border-bottom:1px solid #e4e4e4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}