How to set a space between table rows in html, css-CodePudding

I have a table and I want to create a space between each row in it to get it in the following form:

html code :

<table >
<tr>
    <td>Name of host</td>
    <td>{{ employer.firstname }} {{ employer.surname }}</td>
</tr>
<tr>
    <td>Employer</td>
    <td>{{ employer.company_name }}</td>
</tr>
<tr>
    <td>Phone number</td>
    <td>{{ employer.phone_number }}</td>
</tr>
</table>

in css:

  .table th, td {
         border-bottom: 1px solid #ddd;
    }
 .table td {
         padding: 8px;
         color: #A9A9A9;

    }
 .table table {
        border_spacing: 10em 0.9em !important;

   }

the result is like this but without spacing can someone help me with this?:

thanks!

CodePudding user response：

<head>

    <style>

        table {

            border-collapse: collapse;

        }

        th {

            background-color:green;

            Color:white;

        }

        th, td {

            width:150px;

            text-align:center;

            border:1px solid black;

            padding:5px

         

        }

        .geeks {

            border-right:hidden;

        }

        .gfg {

            border-collapse:separate;

            border-spacing:0 15px;

        }

        h1 {

            color:green;

        }

    </style>

</head>

<body>

    <center>

    <h1>GeeksforGeeks</h1>

    <h2>Row spacing in a table</h2>

    <table>

        <tr>

            <th>Employee ID</th>

            <th>Name</th>

            <th>Gender</th>

            <th>Age</th>

        </tr>

    </table>

    <table class = "gfg">

        <tr>

            <td class = "geeks">10001</td>

            <td>Thomas</td>

            <td>M</td>

            <td>32</td>

        </tr>

        <tr>

            <td class = "geeks">10002</td>

            <td>Sally</td>

            <td>F</td>

            <td>28</td>

        </tr>

        <tr>

            <td class = "geeks">10003</td>

            <td>Anthony</td>

            <td>M</td>

            <td>24</td>

        </tr>

    </table>

    </center>

</body>

CodePudding user response：

Try giving all the ones which are on right, same class name. As given below.

<table width="100%">
  <tr>
    <td > stuff </td>
    <td > stuff </td>
  </tr>
  
  <tr>
    <td > stuff </td>
    <td > stuff </td>
  </tr>

</table>

Then in styles, set the text-align property of the right-side ones to right.

.left {
    text-align: left;
}

.right {
    text-align: right;
}

Note: in html set width="100%" of table for the table to take whole space. Or you can change it to anything.