css细线表格 - 如何使用CSS创建细线表格

摘要： 创建细线表格可以使用CSS的边框属性。以下是一个简单的例子：HTML:<table class="fine-lines-table">...

创建细线表格可以使用CSS的边框属性。以下是一个简单的例子：

HTML:

<table class="fine-lines-table">
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
  <!-- 更多行... -->
</table>

CSS:

.fine-lines-table {
  border-collapse: collapse;
  width: 100%;
}
.fine-lines-table th, .fine-lines-table td {
  border: 1px solid #ddd; /* 细线颜色和宽度 */
  padding: 8px;
  text-align: left;
}
.fine-lines-table tr:hover {
 background-color: #f0f0f0; /* 鼠标悬停时的背景色 */
}

这段代码将创建一个带有细线边框的表格，border-collapse: collapse; 确保表格的边框没有间隔，看起来是一个单一的线条。border: 1px solid #ddd; 定义了细线的颜色、宽度和样式。