Clarity Posted February 2, 2023 Posted February 2, 2023 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: 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: 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?
bernhard Posted February 2, 2023 Posted February 2, 2023 I think what you are looking for is "outline: 1px solid black;" instead of "border" ? 2
wbmnfktr Posted February 2, 2023 Posted February 2, 2023 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; } 1
bernhard Posted February 2, 2023 Posted February 2, 2023 @wbmnfktr is anything wrong with outline? It sounds so simple and obvious to me but obviously you are far more experienced with css than me, so I'd be interested in the reasons for your recommendation as it looks a little complicated to me ?
wbmnfktr Posted February 2, 2023 Posted February 2, 2023 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. 1
Clarity Posted February 3, 2023 Author Posted February 3, 2023 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:
wbmnfktr Posted February 3, 2023 Posted February 3, 2023 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 1 1
rick Posted February 3, 2023 Posted February 3, 2023 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. 2 1
dragan Posted February 4, 2023 Posted February 4, 2023 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 3
dotnetic Posted February 4, 2023 Posted February 4, 2023 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
Recommended Posts