每两行后使html表的边框变粗 [英] Making a border thick of a html table after every 2 rows
问题描述
我创建了一个包含一些内容的表,其中有12行2列.我想显示边框,但是每隔4行之后,我想将水平边框设置得比正常的粗.怎么做?请在这里帮助.
I have created a table with some contents, in that I have 12 rows and 2 columns. I want to display borders, but after every 4 rows, I want to set horizontal border thicker than normal. How to do that? Please help here.
推荐答案
尝试使用此选择器
table tr:nth-of-type(4n) td {
border-bottom: 3px solid #f00;
}
说明:我们首先在这里选择 table
元素,然后通过使用:nth-of-type(4n)
选择该表中的第4行,最后,我们在第4行中选择 td
元素,然后对其应用样式.如果要在顶部和底部设置边框,可以使用 border-bottom
, border-top
属性,或仅使用 border
设置边框 td
元素
Explanation : We are first selecting table
element here and than by using :nth-of-type(4n)
we are selecting every 4th row in that table, and at last we select td
element in that 4th row and apply styles to that. You can use border-bottom
, border-top
properties if you want to have borders on top and bottom or simply use border
to have border on all sides of your td
element
演示2 (CSS标准化)
Demo 2 (CSS Normalized)
这样,您不必声明任何类.
This way you don't have to declare any class..
HTML(如果有人需要)
HTML (If anyone requires)
<table>
<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
</tr>
</table>
注意:上面的选择器将选择您网站中的所有表格,因此最好为您的表格分配一个类,然后选择要在其上应用样式的特定表格,例如
Note: The above selector will select all the tables in your website, so better assign a class to your table and select that specific table you want to apply styles on, for example
table.class_name tr:nth-of-type(4n) td {
/* Styles */
}
这篇关于每两行后使html表的边框变粗的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!