/* 设置表格的宽度为 100% */ table { width: 100%; } /* 设置表格中单元格的宽度为 33.33% */ td { width: 33.33%; }
在上述代码中,大家设置了表格的宽度为百分比,这意味着它将占据其父元素的宽度。这对于响应式设计非常有用,因为表格会自动根据屏幕大小缩放。
接下来,大家设置了单元格的宽度为 33.33%,这意味着在每行中只有三个单元格。这是因为大家设置了每列的宽度为相同的百分比,因此它们将平均分配表格的宽度。
/* 设置表格的宽度为 400 像素 */ table { width: 400px; } /* 设置表格中单元格的宽度为 100 像素 */ td { width: 100px; }
除了百分比之外,您还可以使用像素为单位定义表格和单元格的长宽。这对于需要具有固定尺寸的表格非常有用。
综上所述,通过 CSS 可以轻松定义表格的长宽,以实现更好的网页设计。