html - 使用显示 : inline-block 避免 "duplicate"边框

Question

我正在对 div 用作表格时的行为进行一些研究(也许这不是合适的词)。

剧透警告:这就是我想这样做的原因。如果您不感兴趣，请继续:)

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

好吧，我得到了一个非常令人满意的代码片段，但有一个非常烦人的问题:使用 display: inline-block 时重复边框;

我很确定图片可以更好地解释我的意思:

我还可以在这里提供一个 fiddle :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>