css控制表格样式

基本表格样式

• border-collapse：这个属性可以让表格的边框合并，使表格看起来更整洁。例如，使用border-collapse: collapse;可以使表格的边框合并为一条线。
• border：这个属性可以给表格添加边框。例如，border: 1px solid #000;会给表格加上黑色实线边框。
• width 和 height：这些属性可以分别设置表格的宽度和高度。例如，width: 100%;会使表格宽度占满容器的全部宽度。

表头和表尾样式

• thead 和 tfoot：这两个选择器分别用于选择表格的表头和表尾，允许您单独为它们设置样式。
• th：这个选择器用于选择表格的表头单元格，允许您为表头单元格设置样式。

表体样式

• tbody：这个选择器用于选择表格的表体，允许您为表体设置样式。
• tr：这个选择器用于选择表格的行，允许您为行设置样式。
• td：这个选择器用于选择表格的单元格，允许您为单元格设置样式。

响应式表格

• @media：使用媒体查询来为不同的屏幕尺寸设置不同的样式，使表格具有响应性。

例子

以下是一个简单的例子，展示了如何使用CSS来样式化一个表格：

在这个例子中，表格被设置为宽度为100%，边

​
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  border: 1px solid #000;
}

th {
  background-color: #f9f9f9;
  color: #333;
}

td {
  background-color: #fff;
  text-align: center;
}

@media (max-width: 600px) {
  th, td {
    display: block;
    width: 100%;
  }
}

​

框合并，表头和表尾有内边距和边框，并且表头单元格有一个背景颜色和文本颜色。当屏幕宽度最大为600像素时，表头和表尾单元格显示为块级元素，宽度为100%，从而实现响应式表格。