每两行后使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屋！