How to add space between elements?

We can use normal CSS to make changes in the table, here we will be using border property to give spacing between different tbody elements.

No prior and deep knowledge is required it is just basic CSS and HTML trick.

Note: Only thing to be noted is that there must be one “tr” tag inside the tbody tag.

Example 1: The code that uses the border-top property to give the spacing between the elements is given below.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body{
    color: #fff;
    font-size:12px;
  }
  table {
    border-collapse: collapse;
  }
  table td{
    padding: 5px;
    background-color: #093d24;
  }
  .tbody {
    border-top: 25px solid #0f9d58;
  }
  </style>
<body>
    <table>
      <tbody class="tbody">
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
      </tbody>
      <tbody class="tbody">
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
      </tbody>
      <tbody class="tbody">
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
      </tbody>
    </table>
</body>
</html>

chevron_right


Output:



Example 2: In the below given example we have used Before selector property. This has helped in giving a margin between the tbody elements so the code for this is given below. Also we have used overflow:hidden property in the table to prevent overflow of before element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body{
    color: #fff;
    font-size:12px;
    background-color: #f2f2f2;
  }
  table {
    overflow: hidden;
    border-collapse: collapse;
    position: relative;
  }
  table td{
    padding: 5px;
    border: 1px solid #000;
    background-color: #093d24;
  }
  .tbody::before{
    content: "";
    margin:10px;
  }
  </style>
<body>
    <table>
      <tbody class="tbody">
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
      </tbody>
      <tbody class="tbody">
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
      </tbody>
      <tbody class="tbody">
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
      </tbody>
    </table>
</body>
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.