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

最新推荐文章于 2024-04-25 22:37:35 发布

SamXCode

最新推荐文章于 2024-04-25 22:37:35 发布

阅读量4.1k

点赞数

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

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

版权

2 篇文章 0 订阅

订阅专栏

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

关注