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: enter image description here

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>

• RoToRa: The biggest problem I see here, is that you are not using a table.
• user4602966: @RoToRa tried using a table but can't set rounded border. you need to do border-collapse but than you lose the gaps between table cells.
• RoToRa: I'm quite sure you can have rounded borders on a table no matter the border-collapse state. Also I don't see any gaps between tables cells in the image.
• Sergey-N13: I'm fully agree with @RoToRa, you don't need to try to emulate a table.
• Reinderien: Can you include a screenshot of how your proposed source renders?

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

• Reinderien: Can you include a screenshot of how your proposed source renders?
• ARNON: I wrote the code in VSCode and just realized that I pasted the wrong code here. It's already edited, thanks.
• Reinderien: Neat trick emulating separated borders using box shadow.
• ARNON: Yeah, sometimes we have to think of an alternative solution. haha

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月05日T08: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月17日T21: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月07日T19: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月01日T00: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月17日T10: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月10日T13: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月05日T17: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月29日T10: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月01日T21: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月01日T17: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>

test render