Login
网站首页 > 文章中心 > Css

table样式

作者:小编 更新时间:2023-08-17 22:27:41 浏览量:75人看过

下面是一个简单的示例表格及其对应的CSS样式:

HTML部分:

〓〓html代码如下:〓〓

<table class="my-table">

  <thead>

    <tr>

      <th>姓名</th>

      <th>年龄</th>

      <th>性别</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>John</td>

      <td>25</td>

      <td>男</td>

    </tr>

    <tr>

      <td>Jane</td>

      <td>30</td>

      <td>女</td>

    </tr>

  </tbody>

</table>

CSS部分:

〓〓css代码如下:〓〓

.my-table {

  width: 100%;

  border-collapse: collapse;

}

.my-table th, .my-table td {

  padding: 8px;

  border: 1px solid #ccc;

}

.my-table thead {

  background-color: #f2f2f2;

}

.my-table tbody tr:nth-child(even) {

  background-color: #f9f9f9;

}

上面给出的代码通过CSS样式为表格添加了基本的样式效果:

◆ .my-table 类设置了表格的宽度为100%并将边框合并。

◆ .my-table th, .my-table td 选择器定义了表格头部和单元格的样式,包括内边距和边框。

◆ .my-table thead 选择器设置了表头的背景颜色为浅灰色。

◆ .my-table tbody tr:nth-child(even) 选择器为偶数行设置了背景颜色为浅灰色。

这只是一个简单的示例,你可以根据需要进一步自定义表格的样式,例如调整字体、颜色、对齐方式等。


版权声明:倡导尊重与保护知识产权,本站有部分资源、图片来源于网络,如有侵权,请联系我们修改或者删除处理。
转载请说明来源于"土嘎嘎" 本文地址:http://www.tugaga.com/jishu/css/1586.html
<<上一篇 2023-08-17
下一篇 >> 2023-08-17

编辑推荐

热门文章