css td 宽度 百分比

CSS中指定表格单元格(td)宽度的方式主要有两种，一种是直接指定单位(如px)，另一种则是使用百分比。

使用百分比设置td宽度的好处在于可以根据父容器的大小自适应调整宽度，保证布局的灵活性和稳定性。

table { 
  width: 100%; /* 表格宽度占满父容器 */
}
td {
  width: 25%; /* 设置每个单元格宽度为父容器宽度的四分之一 */
}

上面的代码将表格每个单元格的宽度设置为父容器宽度的四分之一，因此无论表格宽度变化，每个单元格也会相应地自动调整宽度。

需要注意的是，使用百分比设置td宽度时，还需要考虑td之间的间隙(margin、padding)，否则会引起布局错乱。

table {
  width: 100%;
  border-collapse: collapse; /* 合并单元格间隙 */
}
td {
  width: 25%;
  padding: 10px; /* 设置单元格内边距，避免与单元格间隙重叠 */
  vertical-align: middle; /* 垂直居中 */
}

上面的代码中，使用border-collapse属性合并单元格间隙，同时也需要为单元格设置内边距padding，使其与间隙不重叠。

总之，使用百分比设置td宽度能够在保证灵活性的同时，还可以提高页面的响应能力和适应性，是CSS中常用的布局方式之一。