表格布局及样式控制

table {
  /*  合并表格相邻边框 */
  border-collapse: collapse;
  width: 800px;
  /* 表格布局算法,防止文字过多撑开单元格 */
  table-layout: fixed;
}
th,
td {
  border: 1px solid #ccc;
}
tr :first-child {
  text-align: center;
  width: 100px;
  height: 30px;
}
td {
  /* 只对英文起效,以字母作为换行一句 */
  word-break: break-all;
  /*只对英文起效,以单词作为换行一句  */
  word-wrap: break-word;
  /*  只对中文起作用,强制换行。 */
}
td {
  white-space: pre-wrap;
  /* 禁止换行,只对中文起效果 */
  white-space: nowrap;
  overflow: hidden;
  /* 超出显示... */
  text-overflow: ellipsis;
  padding: 10px;
}
<table>
  <tr>
    <th>名称</th>
    <th>描述</th>
  </tr>
  <tr>
    <td>孟郊</td>
    <td>
      唐朝时候,武康县出了个才子叫孟郊。这个孟郊出身微贱,但读书用功,方才出众。一年冬天,有个钦差大臣来到武康县了解民情。县太爷大摆宴席,为钦差大人接风。正当县太爷举杯说“请”,钦差大人点头应酬的辰光,身穿破烂绿色衣衫的小孟郊走了
进来。县太爷一见很不高兴,眼珠一瞪喝道:“去去去,来了小叫花子,真扫雅兴。”
    </td>
  </tr>
  <tr>
    <td>孟郊</td>
    <td>
      唐朝时候,武康县出了个才子叫孟郊。这个孟郊出身微贱,但读书用功,方才出众。一年冬天,有个钦差大臣来到武康县了解民情。县太爷大摆宴席,为钦差大人接风。正当县太爷举杯说“请”,钦差大人点头应酬的辰光,身穿破烂绿色衣衫的小孟郊走了
进来。县太爷一见很不高兴,眼珠一瞪喝道:“去去去,来了小叫花子,真扫雅兴。”
    </td>
  </tr>
</table>

posted @ 2021-04-13 17:41  黑色外套  阅读(40)  评论(0)    收藏  举报