html好看的table样式
文章描述：
如何用html+css制作好看的table样式？
html
首先我们用html制作一个表格，然后定义表格头部和表格内容
<div class="container">
<h2>Table</h2>
<table class="table-ui">
<thead>
<tr>
<th class="priority">Title</th>
<th class="url">URL</th>
<th class="frequency">Frequency</th>
<th class="change">Last Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>百度</td>
<td>https://www.baidu.com/</td>
<td>Daily</td>
<td>2020-01-01</td>
</tr>
<tr>
<td>谷歌</td>
<td>http://www.google.cn/</td>
<td>Daily</td>
<td>2020-01-02</td>
</tr>
<tr>
<td>bing</td>
<td>https://cn.bing.com/</td>
<td>Daily</td>
<td>2020-01-03</td>
</tr>
</tbody>
</table>
</div>css
css样式定义表格头部宽高、表格内容宽高，以及鼠标移动上去样式,然后在写一个响应式移动端适应。
* { margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; background: #f1f1f1; }
h2 { font-size: 20px; color: #00BDFF; padding-bottom: 10px; }
.container { margin-top: 50px; background: #fff; padding: 50px 20px 50px; }
.table-ui { width: 100%; }
.table-ui tr th { height: 30px; padding-left: 5px; font-size: 14px; color: #333; }
.table-ui tr td { height: 30px; padding-left: 5px; font-size: 14px; color: #333; }
.table-ui .url { width: 30%; }
.table-ui .priority { width: 160px; }
.table-ui .frequency { width: 150px; }
.table-ui .change { width: 110px; }
.table-ui tbody tr:nth-child(odd) { }
.table-ui tbody tr:nth-child(even) { background: #f5f5f5; }
.table-ui tbody tr:nth-child(odd) td { border-left: 3px solid #fff; }
.table-ui tbody tr:nth-child(even) td { border-left: 3px solid #fff; }
.table-ui tbody tr:hover { background: #00BDFF; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -ms-transition: all .3s linear; transition: all .3s linear; }
.table-ui tbody tr:hover td { color: #fff; }
a { text-decoration: none; color: #2d2f30; }
@media (max-width: 569px) {
.container { margin-top: 0; }
.priority { display: none; }
.frequency { display: none; }
.table-ui tbody td:nth-child(2) { display: none; }
.table-ui tbody td:nth-child(3) { display: none; }
}
发布时间：2021/08/12
发表评论