4
\$\begingroup\$

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>

\$\endgroup\$
5
  • 3
    \$\begingroup\$ The biggest problem I see here, is that you are not using a table. \$\endgroup\$
    – RoToRa
    Commented Dec 7, 2020 at 13:42
  • \$\begingroup\$ @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. \$\endgroup\$ Commented Dec 7, 2020 at 18:58
  • \$\begingroup\$ 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. \$\endgroup\$
    – RoToRa
    Commented Dec 8, 2020 at 9:42
  • \$\begingroup\$ I'm fully agree with @RoToRa, you don't need to try to emulate a table. \$\endgroup\$
    – Sergey-N13
    Commented Dec 18, 2020 at 19:19
  • \$\begingroup\$ Can you include a screenshot of how your proposed source renders? \$\endgroup\$
    – Reinderien
    Commented Jun 25, 2021 at 16:03

2 Answers 2

1
\$\begingroup\$

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:

\$\endgroup\$
4
  • \$\begingroup\$ Can you include a screenshot of how your proposed source renders? \$\endgroup\$
    – Reinderien
    Commented Jun 25, 2021 at 16:03
  • \$\begingroup\$ I wrote the code in VSCode and just realized that I pasted the wrong code here. It's already edited, thanks. \$\endgroup\$
    – ARNON
    Commented Jun 25, 2021 at 17:51
  • 1
    \$\begingroup\$ Neat trick emulating separated borders using box shadow. \$\endgroup\$
    – Reinderien
    Commented Jun 25, 2021 at 20:54
  • 1
    \$\begingroup\$ Yeah, sometimes we have to think of an alternative solution. haha \$\endgroup\$
    – ARNON
    Commented Jun 26, 2021 at 0:30
1
\$\begingroup\$

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>

test render

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.