How to remove space above the first html table row when using border-collapse: separate?

Jurgitads
May 8, 2024
211 views
0 votes
2 Answers

I am using border-collapse: separate property to add spacing between table rows, and I would like to remove the spacing above the very first table row. What’s the best way to do that?

This is what my table looks like right now.

Below is my code

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
    <style>
        .table-container {
            width: 400px;
            background-color: grey;
            padding: 0px 10px 10px 10px;
        }

        table { 
            border-collapse: separate;
            border-spacing: 0px 7px; 
            width: 100%;
        } 
                
        tr { 
            background-color: #dc2626; 
            color: white; 
        } 

        td {
            padding: 5px;
        }

        tbody tr td:first-child {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
        }

        tbody tr td:last-child {
            border-top-right-radius: 6px; 
            border-bottom-right-radius: 6px;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <tbody>   
                <tr><td>value 1</td><td>value2</td></tr> 
                <tr><td>value3</td><td>value4</td></tr> 
            </table></tbody>
        </table>
    </div>
    <script>
    </script>
</body>
</html>

I tried using border-collapse: collapse property and setting border-bottom, which removed the spacing above the first row successfully, however, the rounded corners did not work. Bellow is the code example.

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
    <style>
        .table-container {
            width: 400px;
            background-color: grey;
            padding: 0px 10px 10px 10px;
        }

        table { 
            border-collapse: collapse;
            width: 100%;
        } 
                
        tr { 
            background-color: #dc2626; 
            color: white; 
            border-bottom: 7px solid grey;
        } 

        td {
            padding: 5px;
        }

        tbody tr td:first-child {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
        }

        tbody tr td:last-child {
            border-top-right-radius: 6px; 
            border-bottom-right-radius: 6px;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <tbody>   
                <tr><td>value 1</td><td>value2</td></tr> 
                <tr><td>value3</td><td>value4</td></tr> 
            </table></tbody>
        </table>
    </div>
    <script>
    </script>
</body>
</html>

Is there a way to achieve both – remove the spacing above the first row and have rounded corners on all table rows?

Answers

The property border-spacing: 0px 7px; is responsible for the space between the rows and the space above the first row.

Based on a few methods I tried out, you can try to get rid of the space above the first row by:

removing the border-spacing: 0px 7px; style
add margin-top: -7px to the table or table-container.

*See the example below for solution 1;

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
    <style>
        .table-container {
            width: 400px;
            background-color: grey;
            padding: 0px 10px 10px 10px;
        }

        table { 
            border-collapse: separate;
            width: 100%;
        } 
                
        tr { 
            background-color: #dc2626; 
            color: white; 
        } 

        td {
            padding: 5px;
        }

        tbody tr td:first-child {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
        }

        tbody tr td:last-child {
            border-top-right-radius: 6px; 
            border-bottom-right-radius: 6px;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <tbody>   
                <tr><td>value 1</td><td>value2</td></tr> 
                <tr><td>value3</td><td>value4</td></tr> 
            </table></tbody>
        </table>
    </div>
    <script>
    </script>
</body>
</html>

It seems we can only add a negative margin to compensate for border spacing.

BTW, the table closing tag </table> is mismatched in your code.

.table-container {
    /* negative margin to compensate for border-spacing  */
    margin-top: calc(var(--border-space-vertical) * -1);
    width: 400px;
    background-color: grey;
    padding: 0px 10px 10px 10px;
  }

<!DOCTYPE html>
<html>
  <head>
    <title>Table</title>
    <style>
      body {
        margin: 0;
      }
      :root {
        --border-space-vertical: 10px;
      }
      .table-container {
        /* negative margin to compensate for border-spacing  */
        margin-top: calc(var(--border-space-vertical) * -1);
        width: 400px;
        background-color: grey;
        padding: 0px 10px 10px 10px;
      }
      table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 10px var(--border-space-vertical); /* Adjust spacing values as needed */
      }
      tr {
        background-color: #dc2626;
        color: white;
      }
      td {
        padding: 5px;
      }
      tbody tr td:first-child {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
      }
      tbody tr td:last-child {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
      }

      tr:first-child {
        border-top: none;
      }
    </style>
  </head>
  <body>
    <div class="table-container">
      <table>
        <tbody>
          <tr>
            <td>value 1</td>
            <td>value2</td>
          </tr>
          <tr>
            <td>value3</td>
            <td>value4</td>
          </tr>
        </tbody>
      </table>
    </div>
    <script></script>
  </body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.