How can I get rid of the fact that every 5th row in my table has a thicker border-bottom?

Question

I noticed that my table, in which i set a border-collapse:collapse and border-bottom: 1px solid grey, has a thicker line between the rows every 5th row. How can I get them to also be 1px?

I also noticed that I cannot set a border-radius. Why is that?

Here's my code:

.list table {
    margin: 0 auto;
    width: 95%;
    border-collapse: collapse;
    border: 2px solid black;
    border-radius: 10px; //HAS NO EFFECT
}

.list th, .list td {
    border-bottom: 1px solid grey;
    padding: 10px;
}

border-collapse and border-radiius don't mix - see further discussion on this at [link]https://stackoverflow.com/questions/13055620/css-border-radius-and-border-collapse — A Haworth, Jul 31 '21 at 17:50
maybe a border-top on td is enough, but where is your HTML/CSS to demonstrate your issue ? — G-Cyrillus, Jul 31 '21 at 20:39
Sorry for late reaction. For some strange reason I could fix it by setting border to 0.5px... — Stijn Klijn, Aug 01 '21 at 10:57

score 0 · Answer 1 · answered Aug 01 '21 at 07:21

No problem with thicker border-bottom for me here. So your problem most likely lies within your HTML which you did not share...

.list table {
    margin: 0 auto;
    width: 95%;
    border-collapse: collapse;
    border: 2px solid black;
    border-radius: 10px; //HAS NO EFFECT
}

.list th, .list td {
    border-bottom: 1px solid grey;
    padding: 10px;
}

<div class="list">
  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
    <tr>
      <td>Row 1 Data 1</td>
      <td>Row 1 Data 2</td>
      <td>Row 1 Data 3</td>
    </tr>
    <tr>
      <td>Row 2 Data 1</td>
      <td>Row 2 Data 2</td>
      <td>Row 2 Data 3</td>
    </tr>
    <tr>
      <td>Row 3 Data 1</td>
      <td>Row 3 Data 2</td>
      <td>Row 3 Data 3</td>
    </tr>
    <tr>
      <td>Row 4 Data 1</td>
      <td>Row 4 Data 2</td>
      <td>Row 4 Data 3</td>
    </tr>
    <tr>
      <td>Row 5 Data 1</td>
      <td>Row 5 Data 2</td>
      <td>Row 5 Data 3</td>
    </tr>
    <tr>
      <td>Row 6 Data 1</td>
      <td>Row 6 Data 2</td>
      <td>Row 6 Data 3</td>
    </tr>
    <tr>
      <td>Row 7 Data 1</td>
      <td>Row 7 Data 2</td>
      <td>Row 7 Data 3</td>
    </tr>
    <tr>
      <td>Row 8 Data 1</td>
      <td>Row 8 Data 2</td>
      <td>Row 8 Data 3</td>
    </tr>
    <tr>
      <td>Row 9 Data 1</td>
      <td>Row 9 Data 2</td>
      <td>Row 9 Data 3</td>
    </tr>
    <tr>
      <td>Row 10 Data 1</td>
      <td>Row 10 Data 2</td>
      <td>Row 10 Data 3</td>
    </tr>
    <tr>
      <td>Row 11 Data 1</td>
      <td>Row 11 Data 2</td>
      <td>Row 11 Data 3</td>
    </tr>
  </table>
</div>

Sorry for late reaction. For some strange reason I could fix it by setting border to 0.5px... — Stijn Klijn, Aug 01 '21 at 10:57

How can I get rid of the fact that every 5th row in my table has a thicker border-bottom?

1 Answers1