Avoid "duplicate" borders using display: inline-block

Question

I'm doing some research (maybe it's not the appropriate word) with div's behavior when used as a table.

Spoiler alert: this is why I want to do this. If you are not interested just go ahead :)

I want to achieve a full working table without using the tableelement and avoiding the use of display: table, [...] properties. This because (I'm not crazy yet, I guess) I found out that the table are not suitable for my project and the display: table properties family gives me so many issues when it comes to styling... I found out that some major SaaS nowaday are using divs instead of tables (Google Sheets, Excel Online, Airtable, my project) and I'm trying to achieve the same result. For reasons. (end of the spoiler)

Well, I came out to a pretty satisfying code snippet with a pretty annoying issue: duplicate borders when using display: inline-block;

I'm pretty sure that a picture can better explain what I mean:

I can also provide a fiddle here: https://jsfiddle.net/Lc0rE/j2obdh0h/

And here we have the code:

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;
}

I really hope someone could help me to solve this annoying issue. I'm also open to every suggestion on different ways to implement this!

Answer 1

The idea is to draw the borders separately to avoid the double borders. For highlight style, I use absolute positioned pseudo elements for two sides of the borders.

$(".cell").click(function() {
  $(".selected").removeClass("selected");
  $(this).addClass("selected");
});

body {
  font-family: "Open Sans", "sans-serif";
  font-weight: 300;
  font-size: 13px;
}

.table-container {
  width: 650px;
  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-top: 1px solid #dde1e3;
  top: 0;
  overflow: visible;
}

.row-container .cell:last-child {
  border-right: 1px solid #dde1e3;
}

.row-container:last-child .cell {
  border-bottom: 1px solid #dde1e3;
}

.selected {
  position: relative;
  background: #EBF7FF;
  border-left: 1px solid blue;
  border-top: 1px solid blue;
}

.selected:before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -1px;
  border-right: 1px solid blue;
}

.selected:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  right: -1px;
  border-bottom: 1px solid blue;
}

.cell-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.draggable {
  position: relative;
  right: -7px;
  width: 12px;
  opacity: .3;
  height: 28px
}

.dragbar {
  position: relative;
  right: -4px;
  width: 4px;
  opacity: 1;
  height: 28px;
}

.dragbar:hover {
  background: blue;
  opacity: .6;
  cursor: ew-resize;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-container">
  <div class="row-container">
    <div class="cell cell-header">
      <div class="cell-content">
        <span>Cell</span>
        <div class="draggable">
          <div class="dragbar"></div>
        </div>
      </div>
    </div>
    <div class="cell cell-header">
      <div class="cell-content">
        <span>Cell</span>
        <div class="draggable">
          <div class="dragbar"></div>
        </div>
      </div>
    </div>
    <div class="cell cell-header">
      <div class="cell-content">
        <span>Cell</span>
        <div class="draggable">
          <div class="dragbar"></div>
        </div>
      </div>
    </div>
    <div class="cell cell-header">
      <div class="cell-content">
        <span>Cell</span>
        <div class="draggable">
          <div class="dragbar"></div>
        </div>
      </div>
    </div>
    <div class="cell cell-header">
      <div class="cell-content">
        <span>Cell</span>
        <div class="draggable">
          <div class="dragbar"></div>
        </div>
      </div>
    </div>
    <div class="cell cell-header">
      <div class="cell-content">
        <span>Cell</span>
        <div class="draggable">
          <div class="dragbar"></div>
        </div>
      </div>
    </div>

  </div>
  <div class="row-container">
    <div class="cell selected">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 class="row-container">
    <div class="cell">Cell1</div>
    <div class="cell">Cel2312312l2</div>
    <div class="cell">Cell2</div>
    <div class="cell">Cell3</div>
    <div class="cell">Cell4</div>
    <div class="cell">Cell5</div>
  </div>
  <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 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>