Making a border thick of a html table after every 2 rows

Question

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.

Answer 1

Try this selector

table tr:nth-of-type(4n) td {
    border-bottom: 3px solid #f00;
}

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

Demo

Demo 2 (CSS Normalized)

This way you don't have to declare any class..

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 */
}