table标签的一些使用小技巧-css重置、单元格合并、表格单元格超出强制换行、统一控制table的列宽
/* CSS重置 */
table, th, td {
border: none;
border-collapse: collapse;
font-size: 14px;
padding: 8px;
}
/* 合并单元格 */
.merge-cells {
/* 水平合并两个单元格 */
border-right: 1px solid #ccc;
}
/* 强制单元格内容换行 */
.wrap-text {
word-break: break-all;
}
/* 统一表格样式 */
.uniform-table {
width: 100%;
border-collapse: collapse;
}
.uniform-table th, .uniform-table td {
border: 1px solid #ddd;
padding: 8px;
}
这段CSS代码展示了如何重置表格样式、合并单元格、强制单元格内容换行,并创建统一的表格样式。在实际开发中,可以直接复用这些类,提高代码的复用性和可维护性。
评论已关闭