How to add margin on table row

user_7234361 0
Viewed 18137

I want add space between row on table like image below:

enter image description here

If possible please show your code to me.

html-table css html
7 Answers
user_17394400

You can use border-spacing. Here is an simple example.

table, th, td {
  background: #ffffff;
  padding: 5px;
}
table {
  background: #999999;
  border-spacing: 15px;
}
<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p>Try to change the border-spacing to 5px.</p>

https://www.w3schools.com/html/html_tables.asp

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellspacing

user_84768300

You cannot give margin to the table row. you can either give border-colapse and border spacing to the table or give border to table row and change its color to table background color. Plz refer below link.

Thanks

http://jsfiddle.net/x1hphsvb/10966/

table{
  border-collapse: separate;
  border-spacing: 0 20px;
  background-color: #e3e7ee
}

table tr td{
  padding:20px !important;
  background-color:white;
}

/* this is the second option */

tr{
  /* border:2px solid #e3e7ee !important */
}
<table class="table ">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

user_40496590

The border-spacing property sets the distance between the borders of adjacent cells.

Note: This property works only when border-collapse is separate.

table {
  border-collapse: separate;
  border-spacing: 15px;
  }
user_98106760

Best option:

  *{box-sizing: border-box}

  table {
      border-collapse: separate;
    }
  tr > td {
      display: inline-block;
      margin-top: 1rem;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      border-top: 1px solid black;
    }
  tr > td:first-of-type {
      border-left: 1px solid black;
    }
user_110371200

Try to use this for the design

or visit for more code demo

@import "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css";

.caseTableWrap {
  margin-bottom: 50px;
      background: #f5f5f5;
      padding: 20px; }

.caseTable {
  border-collapse: separate;
  border-spacing: 0 20px; }
  .caseTable tr {
    -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.05);
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; }
    .caseTable tr + tr {
      cursor: pointer; }
      .caseTable tr + tr:hover {
        -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        transform: translateY(-2px);
        -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); }
    .caseTable tr .caseTableData:last-child, .caseTable tr th:last-child, .caseTable tr td:last-child {
      max-width: 220px; }
    .caseTable tr th {
      border: none;
      font-size: 18px;
      font-weight: 500; }
      .caseTable tr th:first-child {
        border-radius: 8px 0 0 8px; }
      .caseTable tr th:last-child {
        border-radius: 0 8px 8px 0; }
    .caseTable tr td {
      border: none;
      position: relative; }
      .caseTable tr td:first-child {
        border-radius: 8px 0 0 8px; }
      .caseTable tr td:last-child {
        border-radius: 0 8px 8px 0; }
    .caseTable tr .caseTableData, .caseTable tr th, .caseTable tr td {
      background: #fff;
      padding: 20px;
      position: relative; }
      .caseTable tr .caseTableData p, .caseTable tr th p, .caseTable tr td p {
        color: #484848;
        font-size: 16px;
        font-weight: 400; }
        <div class="caseTableWrap">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="caseTableInner">
                            <h3 class="secTitle">
                                <div class="text">
                                    Recent Case
                                </div>
                            </h3>
                            <div class="caseTableWrap table-responsive">
                                <table class="table caseTable">
                                    <tr>
                                        <th>Case ID</th>
                                        <th>Created Date</th>
                                        <th>Expiry Date</th>
                                        <th>Status</th>
                                    </tr>
                                    <tr>
                                        <td>75814</td>
                                        <td>01 January 2020</td>
                                        <td>30 January 2020</td>
                                        <td>Delivered</td>
                                    </tr>
                                    <tr>
                                        <td>75814</td>
                                        <td>01 January 2020</td>
                                        <td>30 January 2020</td>
                                        <td>Delivered</td>
                                    </tr>
                                    <tr>
                                        <td>75814</td>
                                        <td>01 January 2020</td>
                                        <td>30 January 2020</td>
                                        <td>Delivered</td>
                                    </tr>
                                    <tr>
                                        <td>75814</td>
                                        <td>01 January 2020</td>
                                        <td>30 January 2020</td>
                                        <td>Delivered</td>
                                    </tr>
                                    <tr>
                                        <td>75814</td>
                                        <td>01 January 2020</td>
                                        <td>30 January 2020</td>
                                        <td>Delivered</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

user_114240430

you can add top and bottom borders with the same color as the background

table{
    width: 100%;
    border-collapse: collapse;
}

tr{border-bottom: 4px solid white;border-radius: 10px;}
th{ background-color: white;}
td{ background-color: grey;}
<table>
        <thead>
            <tr>
                <th>Name</th>
                <th>id</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td>BDR</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Bader</td>
                <td>2</td>
            </tr>
        </tbody>
    </table>

user_147287650
Related