如何用CSS设置HTML表格

在HTML中，你可以使用CSS来美化和控制表格的样式。以下是设置HTML表格的一些基本步骤：

1. **选择器**：首先，你需要选中你想要应用样式的`<table>`元素。可以使用标签选择器直接选择，如`.my-table`。

.my-table {
  /* 样式属性 */
}

2. **布局**：设置表格的宽度、边距和对齐方式。例如，设置固定宽度或者自适应宽度：

.my-table {
  width: 100%; /* 或者 width: auto; 自适应宽度 */
  margin: 10px;
  text-align: center; /* 如果需要居中对齐文字 */
}

/* 可选行高和列宽 */
tr {
  height: 40px;
}
th,
td {
  width: 50%;
}

3. **样式**：添加背景色、边框、字体颜色等视觉效果：

.my-table {
  border-collapse: collapse; /* 合并单元格边框 */
  background-color: #f8f9fa; /* 表格背景色 */
}

th {
  background-color: #1c1e21; /* 表头背景色 */
  color: white;
  font-weight: bold;
}

td {
  border: 1px solid #dee2e6; /* 单元格边框 */
  padding: 8px; /* 内容填充 */
}

/* 突出表格外层行和列 */
tr:nth-child(even),
tr:hover {
  background-color: #f2f2f2;
}

th:first-child,
td:first-child {
  border-left: none; /* 去除首列边框 */
}

th:last-child,
td:last-child {
  border-right: none; /* 去除尾列边框 */
}

4. **响应式设计**：如果你希望表格在不同设备上显示良好，可以使用媒体查询调整样式。