在網頁設計中,我們經常需要將內容以表格的形式呈現。而在表格中,往往需要將每一列的行數設置為不同的值。這時候,我們就需要使用CSS來實現。
首先,我們需要使用HTML的table標簽來生成表格。比如下面這個例子:
<table> <tr> <th>姓名</th> <th>語文</th> <th>數學</th> <th>英語</th> </tr> <tr> <td>小明</td> <td>80</td> <td>90</td> <td>85</td> </tr> <tr> <td>小紅</td> <td>95</td> <td>85</td> <td>90</td> </tr> <tr> <td>小剛</td> <td>70</td> <td>95</td> <td>80</td> </tr> </table>以上代碼生成了一個三行四列的表格,顯示了三個人的語文、數學、英語成績。接下來,我們需要使用CSS來設置每列的行數不同。 我們可以使用nth-child偽類來選擇每一列。比如,下面這個例子可以讓第一列有四行,其他列有三行:
table tr:nth-child(1), table tr:nth-child(2), table tr:nth-child(3), table tr:nth-child(4) { height: 50px; } table tr:nth-child(n+5):nth-child(-n+7) { height: 70px; }以上代碼中,第一行表示讓第一列的每一行高度都設置為50px。第二行表示讓第二、三、四列的每一行高度都設置為70px。nth-child(n+5)表示選擇第五行及其之后的行,而nth-child(-n+7)表示選擇第七行及其之前的行。 如果要設置更多列的不同行數,我們可以繼續使用nth-child來選擇不同的列,然后設置不同的高度即可。通過這種方式,我們可以靈活地控制表格中每列的行數,使表格更符合我們的要求。
上一篇css 毛玻璃 阮一峰
下一篇css 水桶晃蕩效果圖