skip to Main Content

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 :

enter image description here

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>

2

Answers


  1. 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>
    Login or Signup to reply.
  2.  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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search