CSS表格是一個(gè)網(wǎng)頁中經(jīng)常用到的元素，這里介紹一下如何讓表格響應(yīng)式。我們可以通過CSS中斷點(diǎn)和媒體查詢?cè)O(shè)置網(wǎng)頁在不同屏幕和設(shè)備上的表格呈現(xiàn)效果。

我們可以使用<table>和<td>標(biāo)簽來創(chuàng)建一個(gè)基本表格，然后通過CSS樣式來實(shí)現(xiàn)響應(yīng)式效果。

<table>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr>
<td>張三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
</tr>
</table>

對(duì)于表格響應(yīng)式來說，我們一般設(shè)置最小寬度min-width和斷點(diǎn)media query來控制表格在不同屏幕上的表現(xiàn)。下面是一個(gè)例子：

table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
background-color: transparent;
color: #212529;
font-size: 1rem;
text-align: left;
border-collapse: collapse;
}
@media (min-width: 575.98px) {
table {
display: table;
}
}

在這個(gè)例子中，我們?cè)O(shè)置了如下表格樣式：

• width: 100%;讓表格的寬度始終占據(jù)父元素的100%。
• max-width: 100%;設(shè)置表格的最大寬度為100%以避免表格溢出。
• margin-bottom: 1rem;在表格下方增加一定的間距。
• background-color: transparent;設(shè)置表格背景色為透明色。
• text-align: left;使表格中的文本左對(duì)齊。
• border-collapse: collapse;合并表格單元格的邊框。

然后我們通過@media來設(shè)置不同寬度下表格的顯示效果。在這里我們?cè)O(shè)置最小寬度為575.98px，當(dāng)寬度大于這個(gè)值時(shí)，表格通過display: table;來顯示。

通過上述樣式的設(shè)置，我們可以讓表格根據(jù)屏幕寬度進(jìn)行自適應(yīng)展示，更好地展示表格內(nèi)容。