Creating a basic table with CSS grid

Question

Trying to improve my HTML and CSS.

Creating a Basic Table using CSS grid, to match as closely to this image:

Please ignore the color red and green in the rows and Some rows are missing since it was used with data inside a react application and since I only care about the HTML and CSS I copied only what was relevant.

Having trouble with expanding the last row.

I know it's a mess and a lot to improve.

.App {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  background-color: rgb(243, 241, 241);
  border: 1px solid rgb(170, 167, 167);
  padding: 5px;
}

.table-border {
  background-color: rgb(170, 167, 167);
  border: 1px solid rgb(170, 167, 167);
  border-radius: 6px;
}

.table {
  display: grid;
  /* background-color:rgb(243, 241, 241); */
  border: 1px solid rgb(170, 167, 167);
  border-radius: 6px;
  font-size: 12px;
  grid-template-columns: auto auto auto auto;
  gap: 1px 0px;
  color: #444;
}

.table-footer {
  padding: 5px;
  background-color: rgb(243, 241, 241);
}

.th {
  margin-bottom: 3px;
}

.last {
  border-right: none;
}

.cell {
  padding: 5px;
  background-color: white;
}

.cell.th {
  background-color: rgb(243, 241, 241);
}

.top-left-corner {
  border-radius: 6px 0px 0px 0px;
}

.top-right-corner {
  border-radius: 0px 6px 0px 0px;
}

.bottom-right-corner {
  border-radius: 0px 0px 6px 0px;
}

.bottom-left-corner {
  border-radius: 0px 0px 0px 6px;
}

<div class="wrapper">
  <div class="table-border">
    <div class="table">
      <div class="cell th top-left-corner">Agent ID</div>
      <div class="cell th">Country</div>
      <div class="cell th">Address</div>
      <div class="cell th last top-right-corner">Date</div>
      <div class="cell">007</div>
      <div class="cell">Brazil</div>
      <div class="cell">
        Avenida Vieira Souto 168 Ipanema, Rio de Janeiro
      </div>
      <div class="cell">Dec 17, 1995, 9:45:17 PM</div>
      <div class="cell">005</div>
      <div class="cell">Poland</div>
      <div class="cell">Rynek Glowny 12, Krakow</div>
      <div class="cell">Apr 5, 2011, 5:05:12 PM</div>
      <div class="cell">007</div>
      <div class="cell">Morocco</div>
      <div class="cell">27 Derb Lferrane, Marrakech</div>
      <div class="cell">Jan 1, 2001, 12:00:00 AM</div>
      <div class="cell">005</div>
      <div class="cell">Brazil</div>
      <div class="cell">Rua Roberto Simonsen 122, Sao Paulo</div>
      <div class="cell">May 5, 1986, 8:40:23 AM</div>
      <div class="table-footer bottom-left-corner">10</div>
    </div>
  </div>
</div>

Answer 1

Semantically, it is preferable that you use table instead of div. In fact, it is possible to apply rounded edges to tables and still maintain the gap you need.

I did a part of what you need here in the snippet below, but I'll leave the rest of the work to you.

:root {
  --border: 1px solid rgb(170, 167, 167);
  --main-color: rgb(243, 241, 241);
}

.wrapper {
  border: var(--border);
  border-radius: 6px;
}

.table-border {
  color: #444;
  font-size: 9pt;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  text-align: left;
  overflow: hidden;
  border-width: 0 1px;
  border-spacing: 0 8px;
  border-collapse: separate;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

thead tr th {
  padding: 7px 10px;
  border-right: var(--border);
  background-color: var(--main-color);
  box-shadow: 0px -20px var(--main-color);
}

thead tr th:last-of-type {
  border: none;
}

tbody tr:first-of-type td {
  box-shadow: 0 -10px rgb(243 241 241);
}

tbody tr td {
  padding: 12px 10px 3px;
  background-color: white;
  border-top: var(--border);
}

tfoot tr td {
  padding: 5px 10px;
  text-align: right;
  border-top: var(--border);
  background-color: var(--main-color);
  box-shadow: 0px 20px var(--main-color);
}

<div class="wrapper">
  <table class="table-border">
    <thead>
      <tr>
        <th>Agent ID</th>
        <th>Country</th>
        <th>Address</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>007</td>
        <td>Brazil</td>
        <td>Avenida Vieira Souto 168 Ipanema, Rio de Janeiro</td>
        <td>Dec 17, 1995, 9:45:17 PM</td>
      </tr>
      <tr>
        <td>005</td>
        <td>Poland</td>
        <td>Rynek Glowny 12, Krakow</td>
        <td>Apr 5, 2011, 5:05:12 PM</td>
      </tr>
      <tr>
        <td>007</td>
        <td>Morocco</td>
        <td>27 Derb Lferrane, Marrakech</td>
        <td>Jan 1, 2001, 12:00:00 AM</td>
      </tr>
      <tr>
        <td>005</td>
        <td>Brazil</td>
        <td>Rua Roberto Simonsen 122, Sao Paulo</td>
        <td>May 5, 1986, 8:40:23 AM</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">10 missions</td>
      </tr>
    </tfoot>
  </table>
</div>

Take a look at border-spacing.

Sources:

• W3 Schools: A table with cell spacing
• Border-radius na tabela não funciona CSS

Answer 2

Points:

• Improve the semantic meaning of your markup. Basically tell the browser more machine-readable information about the data in your page:
  • it's definitely a table, not a collection of divs
  • there are some real datetimes, addresses, and countries that have machine-legible ISO3166-2 codes
  • generally, rely on sane CSS selection rather than explicit classes to apply your styles
• The separators in the header look vaguely like non-collapsed borders, but it is not possible to have separated borders and collapsed borders co-existing in the same table - so just add borders to inner spans in the header.
• Since the body of the table does have collapsed borders, you cannot apply border radii. Add a container and apply it to that instead.

An approximate match is the following:

<!DOCTYPE html>
<head>
    <style type="text/css">
      address {
        font-style: normal;
      }

      body {
        font-family: "Century Gothic", sans-serif;
        text-align: left;
        color: #565656;
        margin: 0;
        padding: 2em;
      }

      body, thead, tfoot {
        background-color: #FAFAFA;
      }

      .table-container, th, th span, td {
        border-color: #CCCCCC;
      }

      .table-container {
        margin: 0;
        padding: 0;
        overflow: hidden;
        border-width: 0.2em;
        border-style: solid;
        border-radius: 0.4em;
      }

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

      thead {
        font-size: 1.4em;
      }

      th, tfoot td {
        border-width: 0.2em;
      }

      th {
        padding: 0.5em 0 0.5em 1em;
      }

      td {
        padding: 1em;
      }

      tbody td {
        border-width: 0.1em;
        border-style: solid none;
      }

      th {
        border-width: 0.2em;
        border-style: none none solid none;
      }

      th:not(:last-child) span {
        width: 100%;
        padding: 0.5em 0;
        display: block;
        border-width: 0.1em;
        border-style: none solid none none;
      }

      tbody {
        background-color: white;
        font-size: 1.5em;
      }

      tfoot {
        font-size: 1.4em;
        text-align: right;
      }

      tfoot td {
        border-style: solid none none none;
      }
    </style>
</head>

<body>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th><span>Agent ID</span></th>
          <th><span>Country</span></th>
          <th><span>Address</span></th>
          <th><span>Date</span></th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>005</td>
          <td><data value="BR">Brazil</data></td>
          <td>
            <address>Rua Roberto Simonsen 122, Sao Paulo</address>
          </td>
          <td>
            <time datetime="1986-05-05T08:40:23">May 5, 1986, 8:40:23 AM</time>
          </td>
        </tr>

        <tr>
          <td>007</td>
          <td><data value="BR">Brazil</data></td>
          <td>
            <address>Avenida Vieira Souto 168 Ipanema, Rio de Janeiro</address>
          </td>
          <td>
            <time datetime="1995-12-17T21:45:17">Dec 17, 1995, 9:45:17 PM</time>
          </td>
        </tr>

        <tr>
          <td>011</td>
          <td><data value="PL">Poland</data></td>
          <td>
            <address>swietego Tomasza 35, Krakow</address>
          </td>
          <td>
            <time datetime="1997-09-07T19:12:53">Sep 7, 1997, 7:12:53 PM</time>
          </td>
        </tr>

        <tr>
          <td>007</td>
          <td><data value="MA">Morocco</data></td>
          <td>
            <address>27 Derb Lferrane, Marrakech</address>
          </td>
          <td>
            <time datetime="2001-01-01T00:00:00">Jan 1, 2001, 12:00:00 AM</time>
          </td>
        </tr>

        <tr>
          <td>013</td>
          <td><data value="PL">Poland</data></td>
          <td>
            <address>Zlota 9, Lublin</address>
          </td>
          <td>
            <time datetime="2002-10-17T10:52:19">Oct 17, 2002, 10:52:19 AM</time>
          </td>
        </tr>

        <tr>
          <td>008</td>
          <td><data value="BR">Brazil</data></td>
          <td>
            <address>Rua tamoana 418, tefe</address>
          </td>
          <td>
            <time datetime="2005-11-10T13:25:13">Nov 10, 2005, 1:25:13 PM</time>
          </td>
        </tr>

        <tr>
          <td>005</td>
          <td><data value="PL">Poland</data></td>
          <td>
            <address>Rynek Glowny 12, Krakow</address>
          </td>
          <td>
            <time datetime="2011-04-05T17:05:12">Apr 5, 2011, 5:05:12 PM</time>
          </td>
        </tr>

        <tr>
          <td>003</td>
          <td><data value="MA">Morocco</data></td>
          <td>
            <address>Rue Al-Aidi Ali Al-Maaroufi, Casablanca</address>
          </td>
          <td>
            <time datetime="2012-08-29T10:17:05">Aug 29, 2012, 10:17:05 AM</time>
          </td>
        </tr>

        <tr>
          <td>009</td>
          <td><data value="MA">Morocco</data></td>
          <td>
            <address>atlas marina beach, agadir</address>
          </td>
          <td>
            <time datetime="2016-12-01T21:21:21">Dec 1, 2016, 9:21:21 PM</time>
          </td>
        </tr>

        <tr>
          <td>002</td>
          <td><data value="MA">Morocco</data></td>
          <td>
            <address>Riad Sultan 19, Tangier</address>
          </td>
          <td>
            <time datetime="2017-01-01T17:00:00">Jan 1, 2017, 5:00:00 PM</time>
          </td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td colspan="4">10 missions</td>
        </tr>
      </tfoot>
    </table>
  </div>
</body>
</html>