excel表格制作考勤表_精美网站制作表格教程

```html

```

CSS样式

通过CSS美化表格：

`border-collapse: collapse；` 合并单元格边框

`th,网站 td { border: 1px solid ddd； padding: 8px； text-align: left； }` 设置边框和内边距

`th { background-color: f2f2f2； }` 设置表头背景色

```css

table {

width: 100%;

border-collapse: collapse;

}

th, td {

border: 1px solid ddd;

padding: 8px;

text-align: left;

}

th {

background-color: f2f2f2;

}

tr:nth-child(even) {

background-color: f9f9f9;

}

```

二、高级布局技巧

细线表格

通过设置单元格间距为1像素实现细线边框效果：

```css

table {

border-collapse: collapse;

width: 100%;

}

td {

border: 0;

background-color: black;

padding: 0;

text-align: center;

vertical-align: middle;

}

```

或使用负边距技巧：

```css

td {

border: 1px solid 000;

width: calc(33.33% - 20px);

margin-bottom: -1px;

}

```

间隔表格

使用嵌套表格实现单元格间隔效果：

```html

```

响应式设计

使用百分比宽度或CSS媒体查询实现响应式表格：

```css

table {

width: 100%;

max-width: 1200px;

margin: 0 auto;

}

@media (max-width: 768px) {

table,表表格 thead, tbody, th, td, tr {

display: block;

}

th {

position: absolute;

top: -9999px;

left: -9999px;

}

tr {

margin-bottom: 1rem;

}

td {

border: none;

position: relative;

padding-left: 50%;

}

td::before {

content: attr(data-label);

position: absolute;

left: 0;

width: 45%;

padding-right: 15px;

background-color: f2f2f2;

text-align: left;

}

}

```

三、交互功能扩展

排序功能

使用JavaScript实现表格排序：