怎样用css写表

在日常开发中，表格是最常见的元素之一。使用 HTML 编写表格时，我们会很快就会发现它的限制。这时就需要 CSS 帮忙，让表格更加美观和易于读取。

/*CSS表格样式*/table {
    border-collapse: collapse;
     /*边框合并*/width: 100%;
     /*设置表格宽度，默认为自适应*/max-width: 800px;
     /*最大宽度*/margin-bottom: 1rem;
     /*设置下方空白*/font-size: 1rem;
     /*设置字体大小*/color: #333;
 /*设置字体颜色*/}
th,td {
    border: 1px solid #ddd;
     /*设置边框*/padding: 0.5rem;
 /*设置单元格内边距*/}
th {
    background-color: #f5f5f5;
     /*设置表头背景色*/font-weight: bold;
 /*设置表头字体加粗*/}
td {
    background-color: #fff;
 /*设置单元格背景色*/}

在表头的 tr 标签中使用 th 元素，而在表格主体的 tr 标签中使用 td 元素。这样在 CSS 操作时，就可以根据选择器来区分表头和表格主体元素的样式了。

使表格更易读的一个技巧是交错着设置单元格的背景色。如果单元格的背景颜色全部相同，表格则就很难以阅读了。

还可以使用 CSS 使表格适应不同的设备宽度。可以在样式表中设置表格的最大宽度，这样当用户的设备窗口小于表格最大宽度时，表格就会自动缩小。

最后，还可以添加 hover 效果，让用户在移动鼠标时更直观地看到自己所选择的单元格。

/*CSS hover效果*/td:hover {
    background-color: #f5f5f5;
 /*设置鼠标移入时的背景色*/}
    

总结起来，编写好的 CSS 可以使表格更加易于阅读和操作。要实现这些效果，只需要使用简单的 CSS 标签和属性即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！