使用 display: inline-block 避免 "duplicate" 边框

Question

我正在研究 div 用作 table 时的行为（也许这个词不合适）。

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

我想在不使用 table 元素并避免使用 display: table, [...] 属性的情况下实现完整的工作 table。这是因为（我想我还没疯）我发现 table 不适合我的项目 table 并且 display: table 属性系列给我带来了很多问题谈到造型...... 我发现现在一些主要的 SaaS 使用 divs 而不是 tables（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 { 
    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

Answer 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>

使用 display: inline-block 避免 "duplicate" 边框

Avoid "duplicate" borders using display: inline-block

html

css

flexbox

css-tables