CSS强制长字符转换行,table边框双线问题

By | 2017年4月26日

1 强制长字符串换行

word-wrap normal | break-word
word-break normal | break-all

有时候word-wrap会不起作用,建议使用wordk-break。

  .material-table {
    width: 110px;
    table-layout: auto;
    /*word-break: break-all;*/
    word-wrap: break-word;
    border: 1px solid black;
    font-size: 10px;
  }

2 Table边框

2.1 默认边框是双线

因为th和td也有边框,所以看着有点粗。

table, th, td {
    border: 1px solid black;
}

2.2 单线边框

使用border-collapse设置是否是让边框蜕变成单线框。

table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}

2.3 只要外面的框

table {
    border-collapse: collapse;
    border: 1px solid black;
}