Jump to content

What is the optimal way of getting rid of double borders using a table with divs?


Clarity
 Share

Recommended Posts

Hello everyone!

Recently I needed to construct a table using divs only:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="cards">
        <div class="cards__item"></div>
        <div class="cards__item"></div>
        <div class="cards__item"></div>
        <div class="cards__item"></div>
        <div class="cards__item"></div>
        <div class="cards__item"></div>
        <div class="cards__item"></div>
        <div class="cards__item"></div>
    </div>
</body>
</html>

CSS:

.cards {
    display: flex;
    width: 150px;
    flex-wrap: wrap;
}
.cards__item {
    border: 1px solid black;
    flex: 0 1 32%;
    width: 50px;
    height: 50px;
}

The problem which I ran into is that borders are being doubled:

TableDivsDoubleBorder.png.eb80195f693bcd536a075a977b211ce6.png

Then I wrote to CSS the margin:

.cards__item {
    border: 1px solid black;
    margin: -1px -1px 0 0;
    flex: 0 1 32%;
    width: 50px;
    height: 50px;
}

Now the double borders disappear:

TableDivs.png.250c43fd1a23ae867690a8265744a476.png

However, the issue in this solution is that there is a small (1px) margin to the right of table. Can you please tell me how I can do something better for this?

Link to comment
Share on other sites

I'd probably do it this way.

.cards {
  display: flex;
  width: 150px;
  flex-wrap: wrap;

  /* border */
  border-left: 1px solid black;
  border-top: 1px solid black;
  /* taking care of the box model */
  box-sizing: border-box;
}

.cards__item {
  flex: 0 1 33%;
  width: 50px;
  height: 50px;

  /* border */
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  /* taking care of the box model */
  box-sizing: border-box;
}
  • Like 1
Link to comment
Share on other sites

The main reason is that outlines are used when tabbing through content and an item is in :focus .
So when using outline instead of border the default highlighting in your browser won't work anymore.

Another thing is that a border is within or part of the element while an outline is slightly outside of it.
So there could be another challenge in more complex designs.

Last but not least... using outline wouldn't fix the issue. At least not without further fixes and changes.

outline.png.aef0edc7cb99f545fe46591b3a0676e4.png

  • Thanks 1
Link to comment
Share on other sites

12 hours ago, wbmnfktr said:

I'd probably do it this way.

.cards {
  display: flex;
  width: 150px;
  flex-wrap: wrap;

  /* border */
  border-left: 1px solid black;
  border-top: 1px solid black;
  /* taking care of the box model */
  box-sizing: border-box;
}

.cards__item {
  flex: 0 1 33%;
  width: 50px;
  height: 50px;

  /* border */
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  /* taking care of the box model */
  box-sizing: border-box;
}

@wbmnfktr, thank you for your variant. The only problem in it is that if we have only 1 or 2 cells, the border continues for non-existent 3rd or 2nd and 3rd element:

TableDivsOnly2.png.edfb04a27d048002e49e0b63a986eb46.pngTableDivsOnly1.png.4d159b0b716bd46e7928557521c28680.png

Link to comment
Share on other sites

So the number of items isn't fixed. Didn't think about that.

Then your version with negative margins would be the best solution* here.
You could play around with padding and positioning those items a bit to remove that extra space but to be honest I wouldn't care that much. If it's about aliging you always can reposition the parent container a bit.

 

* in case it's a real table, I'd recommened to use a real table markup

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Basically reiterating @wbmnfktr a Table is semantic while the DIVs are not. There a quite a few google search results for css div tables dating back to '08 where others have attempted replicating the html table using div elements. The main issue nowadays is the device screen sizes. Tables don't scale well at different resolutions. That being said, css has display:table, display:table-row, and display:table-cell type attributes, as well as using pseudo selectors like :last-child to reference specific elements. You could also hide specific table columns at different resolutions. I know this isn't the answer you were looking for, but maybe it helps with segregating large datasets into manageable chunks.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

What's the big picture here? Will this div-soup eventually contain content? Or stay like that, just as some sort of decoration?

The easiest way to do what you want, is using a plain old table - but with role=presentation. If you don't present tabular data to the user, this is OK.

<table role="presentation">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
    table {
      border-collapse: collapse;
      width: 150px;
    }

    td {
      width: 50px;
      height: 50px;
      border: 1px solid black;
    }

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role

 

  • Like 3
Link to comment
Share on other sites

On 2/2/2023 at 4:53 PM, bernhard said:

I think what you are looking for is "outline: 1px solid black;" instead of "border"

Outline is always on all four sides, and you can not set properties like width or color indiviually

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...