避免＆＃34;重复＆＃34;使用display的边框：inline-block

Question

当我用作桌子时，我正在进行一些研究（可能它不是合适的词）。

剧透警报：这就是我想要这样做的原因。如果您不感兴趣，请继续：）

我希望在不使用table元素的情况下实现完整的工作表，并避免使用display: table, [...]属性。这是因为（我还没有疯狂，我猜）我发现table不适合我的项目，display: table属性系列在造型方面给了我很多问题... 我发现现在一些主要的SaaS正在使用div而不是表格（Google表格，Excel Online，Airtable，我的项目），并且我试图获得相同的结果。出于原因。 （剧透的结尾）

好吧，当我使用display: inline-block时，我出现了一个非常令人满意的代码片段，其中有一个非常烦人的问题：重复边框;

我非常确定图片可以更好地解释我的意思：

我还可以在这里提供小提琴：https://jsfiddle.net/Lc0rE/j2obdh0h/

这里我们有代码：

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

我真的希望有人能帮我解决这个烦人的问题。 我也对不同的实施方法提出了各种建议！

Answer 1

这个想法是分开绘制边框以避免双边框。对于高光样式，我使用绝对定位的伪元素作为边框的两边。

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