css table 平均分配

CSS表格是Web开发中常用的布局工具之一，但是在实际使用中可能会遇到表格内容不均匀分布的问题。如何让表格中的内容平均分配是本文要探讨的问题。

table {
  width: 100%; /* 表格宽度为100% */
  border-collapse: collapse; /* 合并表格边框 */
}

td {
  text-align: center; /* 单元格内容居中 */
}

td:not(:last-child) {
  width: calc(100% / 3); /* 设置每个单元格的宽度为总宽度的1/3 */
}

上述代码中的关键点在于设置每个单元格的宽度为总宽度的1/3。这是通过CSS中的calc()函数实现的，意思是用总宽度除以3作为单元格的宽度。

还可以通过设置表格的布局方式来实现平均分配，如下：

table {
  width: 100%; /* 表格宽度为100% */
  table-layout: fixed; /* 表格布局方式为固定 */
}

td {
  text-align: center; /* 单元格内容居中 */
}

td {
  width: calc(100% / 3); /* 设置每个单元格的宽度为总宽度的1/3 */
}

在表格布局方式为固定时，单元格的宽度会平均分配。但是需要注意的是，如果单元格内容过多时会导致单元格变窄，内容溢出。因此需要根据实际情况来选择合适的布局方式。

总之，通过以上两种方法可以实现CSS表格中内容平均分配的效果，可以根据具体的需求使用不同的方法实现。