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

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;  省略号

.main-table {
	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;
}


你可能感兴趣的:(HTML/JS)