I've been experimenting with the behavior of div elements when used as a table, rather than using the traditional table element or display properties. The main reason for this is that I have found tables and display properties to be problematic for my project. Interestingly, some major SaaS companies like Google Sheets, Excel Online, and Airtable are also opting for divs over tables, which has inspired me to try and achieve similar results. For reasons.
After working on some code snippets, I encountered an irritating issue: duplicate borders when using display: inline-block. Here's a visual example:
https://i.sstatic.net/EzzXe.png
You can also view a fiddle here: https://jsfiddle.net/Lc0rE/j2obdh0h/
Here is the code snippet:
HTML
<div class="table-container">
<div class="row-container">
<div class="cell">Cell1</div>
<div class="cell">Cell2</div>
<div class="cell">Cell2</div>
<div class="cell">Cell3</div>
<div class="cell">Cell4</div>
<div class="cell">Cell5</div>
</div>
</div>
CSS
.table-container {
width: 700px;
height: 100vh;
background: #fefefe;
}
.row-container {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
background: #fff;
height: 30px;
}
.cell-header {
font-weight: bold;
}
.cell {
display: inline-flex;
flex-direction: column;
justify-content: center;
padding-left: 5px;
min-width: 100px;
/* ;
border-left: 1px solid #dde1e3;
border-right: 1px solid transparent;
border-top: 1px solid transparent; */
border: 1px solid #dde1e3;
top: 0;
overflow: visible;
}
.cell:last-child {
border-right: 1px solid #dde1e3;
}
.row-container:last-child {
border-bottom: 1px solid #dde1e3;
}
.selected {
border: 1px solid #00b9e6 !important;
background: #EBF7FF !important;
}
.cell-content {
display: flex;
flex-direction: row;
justify-content: space-between;
}
If anyone has any insights on how to solve this border duplication issue, or suggestions on alternative approaches, I am open to all ideas!