如何创建:比较表格
- Página anterior Tabla responsiva
- Página siguiente Video a pantalla completa
学习如何使用 CSS 创建比较表格。
Características | Básico | Pro |
---|---|---|
Texto de muestra | ||
Texto de muestra | ||
Texto de muestra | ||
Texto de muestra | ||
Texto de muestra |
如何创建比较表格
第一步 - 添加 HTML:
/* Font Awesome 图标库 */ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <table> <tr> <th style="width:50%">Características</th> <th>Básico</th> <th>Pro</th> </tr> <tr> <td>Texto de muestra</td> <td><i class="fa fa-remove"></i></td> <td><i class="fa fa-check"></i></td> </tr> <tr> <td>Texto de muestra</td> <td><i class="fa fa-check"></i></td> <td><i class="fa fa-check"></i></td> </tr> </table>
第二步 - 添加 CSS:
/* 设置表格样式 */ table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; } /* 设置表头和表格数据的样式 */ th, td { text-align: center; padding: 16px; } th:first-child, td:first-child { text-align: left; } /* 表格斑马纹行 */ tr:nth-child(even) { background-color: #f2f2f2 } .fa-check { color: green; } .fa-remove { color: red; }
- Página anterior Tabla responsiva
- Página siguiente Video a pantalla completa