display：inline-blockを使用して "重複"ボーダーを避けてください

Question

テーブルとして使用したときのdivの振る舞いについて、いくつかの調査を行っています（多分適切な単語ではないでしょう）。

スポイラーの警告：これは私がこれをやりたい理由です。興味がない場合は

table要素を使用せずにdisplay: table, [...]プロパティを使用しないで、完全な作業表を作成したいと考えています。これは（私はまだ夢中ではない、私は推測する）tableが私のプロジェクトには適していないことを知り、display: tableプロパティファミリは、スタイリングに際して私に非常に多くの問題をもたらします。 私は、 SaaSは現在、テーブル（Googleスプレッドシート、Excel Online、Airtable、私のプロジェクト）ではなくdivを使用していますが、私は同じ結果を達成しようとしています。理由から。 （スポイラーの終わりは）

まあ、私はかなり迷惑な問題にかなり満足のコードスニペットに出てきた：重複国境display: inline-blockを使用して、

私は絵が良く、私が何を意味するか説明できることをかなり確信している：

私もここにフィドル提供することができます：私たちは、コードを持っているhttps://jsfiddle.net/Lc0rE/j2obdh0h/

そしてここに：

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

私は本当に誰かがこの厄介な問題を解決するために私を助けることができる願っています。 私はこれを実装するさまざまな方法について、あらゆる提案にもオープンしています！

Answer 1

アイデアは、二重の境界線を避けるために、別途の境界線を描画することです。ハイライトスタイルでは、境界の2辺に絶対配置された擬似要素を使用します。

$(".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>

Answer 2

が、この代わりに試してみてください：

.cell { 
    border-left: 1px solid red; 
} 
.cell:last-child { 
    border-right: 1px solid red; 
} 
.row-container { 
    border-top: 1px solid blue; 
} 
.row-container:last-child { 
    border-bottom: 1px solid blue; 
} 

revised fiddle