Jump to content

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

Clarity

By Clarity,
in Dev Talk

 Share

Recommended Posts

Clarity Sr. Member

Clarity

Posted
Posted

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
wbmnfktr Hero Member

wbmnfktr

Posted
Posted

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
wbmnfktr Hero Member

wbmnfktr

Posted
Posted

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
Clarity Sr. Member

Clarity

Posted
  • Author
Posted
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
wbmnfktr Hero Member

wbmnfktr

Posted
Posted

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
rick Hero Member

rick

Posted
Posted

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
dragan Hero Member

dragan

Posted
Posted

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
 Share
Go to topic listing

  • Recently Browsing   0 members

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