Recommand · August 30, 2021 0

How to get the inner borders of an html table to not touch outer borders?

I am trying to implement an XD design but I am having issues styling a table.

And I can’t figure out how to get my internal borders in my HTML table to not touch the borders.

Can this be done using purely HTML and CSS?

Basically, I am trying to match this picture.

Not sure if it changes anything but I am building it on ReactJS

enter image description here

.d100 {
  width: 100%;
}
.d100 .table {
  border: 1px solid black;
  border-collapse: collapse;
  width: 100%;
  padding: 15px 0 15px 0;
  background-color: #faf9fe;
}
.d100 .table thead {
  border-bottom: 1px solid #ccc2c2;
  color: black;
}
.d100 .table thead th {
  padding: 15px 0 15px 15px;
  text-align: left;
}
.d100 .table tbody tr {
  border-bottom: 1px solid #ccc2c2;
}
.d100 .table tbody tr td {
  text-align: left;
  color: #666;
  padding: 15px 15px 15px 15px;
}
.d100 .table tbody tr td.green {
  color: green !important;
}
.d100 .table tbody tr td.orange {
  color: orange !important;
}
.d100 .table tbody tr td.red {
  color: red !important;
}
.d100 .table tfoot tr td div {
  display: flex;
  text-align: center;
  font-weight: bolder;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-right: 10px;
  padding-left: 10px;
}
.d100 .table tfoot tr td div img {
  padding-top: 3px;
  padding-bottom: 4px;
  padding-right: 10px;
  padding-left: 10px;
  vertical-align: middle;
}
.d100 .table tfoot tr td.orange {
  color: orange !important;
}
.d100 .d10 {
  display: inline-block;
  vertical-align: middle;
  min-width: 5%;
}
.d100 .d90 {
  display: inline-block;
  width: 90%;
  word-wrap: break-word;
  word-break: break-all;
}
<div class='d100'>
  <table class='table'>
    <thead>
      <tr>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
      </tr>

    </thead>
    <tbody>
      <tr> 
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr> 
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>


    </tbody>
    <tfoot>
      <tr> 
          <td></td><td></td><td></td><td></td>
          <td>
            <div> 
              <span>Previous</span>
            </div>
          </td>
          <td>
            <div> 
              <span>Next</span>
            </div>
          </td>
      </tr>
    </tfoot>
  </table>
</div>

Use div:s instead of th, table, td etc, because the table elements are impossible to style and, or work with, divs are not. For example with table-elements, you can’t add a hr between them which you will need to do.

EDIT: Here is my example why divs are better:

<div class='d100'>
  <div class='table'>
    <div class="tableCellHeader">
      <div class="tableCells">Title</div>
      <div class="tableCells">Title</div>
      <div class="tableCells">Title</div>
      <div class="tableCells">Title</div>
      <div class="tableCells">Title</div>
      <div class="tableCells">Title</div>
    </div>
    <hr class="divider">
    <div class="tableRow">
      <div class="tableCellHeader">
        <div class="tableCells">Content</div>
        <div class="tableCells">Content</div>
        <div class="tableCells">Content</div>
        <div class="tableCells">Content</div>
        <div class="tableCells">Content</div>
        <div class="tableCells">Content</div>
      </div>
    </div>
  </div>
</div>

<style>
.d100 {
  width: 100%;
}
.table {
  border: 1px solid black;
  width: 100%;
  padding: 15px 0 15px 0;
  background-color: #faf9fe;
}
.tableRow {
  color: black;
}

.tableCellHeader {
  color: black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.tableCells {
  text-align: left;
  padding: 15px 0px 15px 15px;
}

.divider {
  margin: 0 10px;
}

</style>

Add hr-elements between the tablerows instead of "border-bottom" and style the hr instead with for example padding or margin to make the line not touch the outer border.

you can assign aria-roles to the divs to improve useability, that way you don’t even need to use table, th, tr: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role

Ok, so brief reminder:

  • padding add space between an element’s content and its border
  • margin add space after an element’s border.

The inspect content function of most browser has a nice visualition in the style section.

Add a margin-left and a margin-right to your .d100 .table tbody tr class.