table中td虚线

385 阅读1分钟

table中td虚线

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

td{
  border-bottom: 1px dashed #ccc;
}
.border{
  border: none;
}

border-collapse: separate;核心是为外边距合并起来,要设置在table那里就能合并所有的单元格了 记住,只能设置在table中。但是合并所有单元格,设置在tr或者td标签中无用。 border-spacing: 5px;核心是设置相邻单元格的边框间的距离,记住一点就是上下左右都是5px哦,如果相邻之间有5px就不用设置了哈,因为这标签的作用就是设置所有的td上下左右为5px。

使用background背景设置虚线

background: linear-gradient(
    to left,
    transparent 0%,
    transparent 50%,
    #ccc 50%,
    #ccc 100%
);
background-size: 10px 1px;
background-repeat: repeat-x;