在线css 表格制作

在线CSS表格制作工具

使用在线工具可以快速生成CSS表格代码，无需手动编写。以下是一些常用工具：

CSS Table Generator

• 网址：https://divtable.com/
• 功能：支持自定义行列、边框样式、背景色等，直接生成HTML和CSS代码。

Table Generator by W3Schools

• 网址：https://www.w3schools.com/html/html_tables.asp
• 功能：提供交互式表格设计，适合初学者学习基础表格代码。

手动编写CSS表格代码

如需完全自定义表格样式，可通过以下CSS属性实现：

HTML结构

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
</table>

基础CSS样式

table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}

响应式表格设计

针对移动端优化，可使用以下方法：

水平滚动

.table-container {
  overflow-x: auto;
}

堆叠布局（小屏幕适用）

@media (max-width: 600px) {
  tr {
    display: block;
    margin-bottom: 1rem;
  }
  td {
    display: block;
    text-align: right;
  }
  td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

高级样式技巧

斑马条纹

tr:nth-child(even) {
  background-color: #f9f9f9;
}

悬停效果

tr:hover {
  background-color: #e6f7ff;
}

圆角边框

table {
  border-radius: 8px;
  overflow: hidden;
}