如何设计漂亮的css表格样式？如何美化table？

如何制作漂亮的css表格样式？让你的HTML表格看起来很漂亮很容易——在今天的文章中，我们将看看30行左右的CSS代码来美化table，让你得到更漂亮的表格样式。

首先编写表格的HTML代码

让我们为这个表格编写一些表格HTML代码样板。

<table class="styled-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dom</td>
            <td>6000</td>
        </tr>
        <tr class="active-row">
            <td>Melissa</td>
            <td>5150</td>
        </tr>
        <!-- and so on... -->
    </tbody>
</table>

注意我们有两个类:

• .style-table：这样我们就不用修改网站上的每一个<table>了，使用CSS类是一个常见的做法。
• .active-row：表示将某一个单元行激活成为"active"行——这个类用于突出显示特定的行，我们很快就会看到它自己的CSS详细代码。

漂亮的css表格样式代码

让我们首先主要关注<table>元素:

.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

其中大多数都是不言自明的，但让我们来看看主要的一些属性设置:

• box-shadow：在表格周围添加一个微妙的透明阴影
• border-collapse：确保表格单元格边界之间没有空间

美化table样式的thead

对于标题，我们可以简单地改变背景颜色，并应用一些基本的样式到文本:

.styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}

制作漂亮的表格单元格

让我们把事情分开一点:

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

进一步美化table的单元行…

为此，我们需要做三件事:

1. 为每一行添加一个底部边框以分隔单元行。
2. 每隔一行添加一个较亮的背景，以提高可读性。
3. 在最后一行添加深色边框，表示表格的结束。

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

让激活单元行看起来更不一样

为此，我们将对表格中被激活的行的文本进行修改:

.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

如何设计漂亮的css表格样式？上面我们用了30行代码为了展示了CSS表格的美化实现代码。如何美化table？你可以借鉴上面的代码进行美化，并进一步对表格样式进行优化，只要你够细心，慢慢调整样式，就能实现很漂亮的样式。希望本文可以帮助到你，如果你有任何改进建议，请在下面的回复中告诉我😁