Html - How to add Spacing between table columns

Ashish
October 13, 2023
82 views
0 votes
2 Answers

I want to create a table similar to the image given below as the given image contains more spacing between columns compare to what i have created. What should I do to look similar.

Reference table :

here is the code of my table:
you can even suggest other edits as well to make it look similar. Thank you.

<style>
  .styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }

  .styled-table thead tr {
    background-color: #6c6f7271;
    color: #000000;
    text-align: left;
  }

  .styled-table th,
  .styled-table td {
    padding: 12px 15px;
  }

  .styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
  }

  .styled-table tbody tr:nth-of-type(even) {
    background-color: #8410e393;
  }
  
</style>

  <div>
    <table class="styled-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>age</th>
          <th>city</th>
          <th>salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ashish</td>
          <td>21</td>
          <td>Mumbai</td>
          <td>90000</td>
        </tr>
        <tr>
          <td>Yadnesh</td>
          <td>20</td>
          <td>Mumbai</td>
          <td>88000</td>
        </tr>
        <tr>
          <td>Vinit</td>
          <td>20</td>
          <td>Mumbai</td>
          <td>70000</td>
        </tr>
        <tr>
          <td>Pushkar</td>
          <td>21</td>
          <td>Mumbai</td>
          <td>84000</td>
        </tr>
        <tr>
          <td>Pushkar</td>
          <td>21</td>
          <td>Mumbai</td>
          <td>84000</td>
        </tr>
        <!-- and so on... -->
      </tbody>
    </table>
  </div>

Answers

How about increasing the horizontal padding?

<style>
  .styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }

  .styled-table thead tr {
    background-color: #6c6f7271;
    color: #000000;
    text-align: left;
  }

  .styled-table th,
  .styled-table td {
    padding: 12px 60px;

  }

  .styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
  }

  .styled-table tbody tr:nth-of-type(even) {
    background-color: #8410e393;
  }
  
</style>

  <div>
    <table class="styled-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>age</th>
          <th>city</th>
          <th>salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ashish</td>
          <td>21</td>
          <td>Mumbai</td>
          <td>90000</td>
        </tr>
        <tr>
          <td>Yadnesh</td>
          <td>20</td>
          <td>Mumbai</td>
          <td>88000</td>
        </tr>
        <tr>
          <td>Vinit</td>
          <td>20</td>
          <td>Mumbai</td>
          <td>70000</td>
        </tr>
        <tr>
          <td>Pushkar</td>
          <td>21</td>
          <td>Mumbai</td>
          <td>84000</td>
        </tr>
        <tr>
          <td>Pushkar</td>
          <td>21</td>
          <td>Mumbai</td>
          <td>84000</td>
        </tr>
        <!-- and so on... -->
      </tbody>
    </table>
  </div>

 Just add width bit more like 600px

  .styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    width:600px;    //  <------ Just added this 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }

  .styled-table thead tr {
    background-color: #6c6f7271;
    color: #000000;
    text-align: left;
  }

  .styled-table th,
  .styled-table td {
    padding: 12px 15px;
  }

  .styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
  }

  .styled-table tbody tr:nth-of-type(even) {
    background-color: #8410e393;
  }

  <div>
    <table class="styled-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>age</th>
          <th>city</th>
          <th>salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ashish</td>
          <td>21</td>
          <td>Mumbai</td>
          <td>90000</td>
        </tr>
        <tr>
          <td>Yadnesh</td>
          <td>20</td>
          <td>Mumbai</td>
          <td>88000</td>
        </tr>
        <tr>
          <td>Vinit</td>
          <td>20</td>
          <td>Mumbai</td>
          <td>70000</td>
        </tr>
        <tr>
          <td>Pushkar</td>
          <td>21</td>
          <td>Mumbai</td>
          <td>84000</td>
        </tr>
        <tr>
          <td>Pushkar</td>
          <td>21</td>
          <td>Mumbai</td>
          <td>84000</td>
        </tr>
        <!-- and so on... -->
      </tbody>
    </table>
  </div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to add Spacing between table columns

Answers