使用 "display: table-cell" 的错误边框行为

Question

我目前正在进行一个项目，我必须使用 <div> 元素构建一个大数据 table。我不会使用语义 <table>（它用于一些个人项目和实验室）。

我使用有用的 display: table 属性在主 table 结构上确实取得了成功，但是当我尝试应用 CSS 边框样式时遇到了一些困难到单元格（fiddle link 在此 post 的末尾）。单元格的宽度和高度在增加，我无法避免它与边框属性一起播放。

HTML

<!-- Main Container -->
<div class="main-container">
  <!-- Table container (where the display: table is applied) -->
  <div class="table-container">

    <!-- First row -->
    <div class="table-row">
      <div class="table-cell">
        <span>Table cell</span>
      </div>

      <div class="table-cell">
        <span>Table cell</span>
      </div>

      <div class="table-cell">
        <span>Table cell</span>
      </div>

      <div class="table-cell">
        <span>Table cell</span>
      </div>

      <div class="table-cell">
        <span>Table cell</span>
      </div>
    </div>

    <!-- Second row -->
    <div class="table-row">
      <div class="table-cell">
        <span>Table cell</span>
      </div>

      <div class="table-cell">
        <span>Table cell</span>
      </div>

      <div class="table-cell">
        <span>Table cell</span>
      </div>

      <div class="table-cell">
        <span>Table cell</span>
      </div>

      <div class="table-cell">
        <span>Table cell</span>
      </div>
    </div>

    <!-- Third row -->
    <div class="table-row">
      <div class="table-cell">
        <span>Table cell</span>
      </div>

      <div class="table-cell">
        <span>Table cell</span>
      </div>

      <div class="table-cell">
        <span>Table cell</span>
      </div>

      <div class="table-cell">
        <span>Table cell</span>
      </div>

      <div class="table-cell">
        <span>Table cell</span>
      </div>
    </div>
  </div>
</div>

CSS

body {
  font-family: "Helvetica", "Open-sans", "sans-serif";
}

.main-container {
  height: 200px;
  overflow-y: auto;
}

.table-container {
  display: table;
  border: 1px solid #666666;
  border-spacing: 5px;
  border-collapse: collapse;
  font-size: 13px;
}

.table-row {
  display: table-row;
  width: auto;
}

.table-cell {
  display: table-cell;
  min-width: 100px;
  padding-left: 3px;
  height: 100%;
  height: 30px;
  vertical-align: middle;
  border: 1px solid #dde1e3;
  overflow: visible;
}

.selected {
  display: inline-block;
  border: 1px solid #00b9e6 !important;
  z-index: 100000 !important;
  background: #EBF7FF !important;
}

JS

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

这里是fiddle：https://jsfiddle.net/Lc0rE/9ntxmLk4/

能否请您帮助我了解如何避免同时更改我单击的单元格的宽度和高度？

Answer 1

在 .selected 上使用 box-sizing: border-box;。这是一个奇迹创造者：

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

body {
  font-family: "Helvetica", "Open-sans", "sans-serif";
}
.main-container {
  height: 200px;
  overflow-y: auto;
}
.table-container {
  display: table;
  border: 1px solid #666666;
  border-spacing: 5px;
  border-collapse: collapse;
  font-size: 13px;
}
.table-row {
  display: table-row;
  width: auto;
}
.table-cell {
  display: table-cell;
  min-width: 100px;
  padding-left: 3px;
  height: 100%;
  height: 30px;
  vertical-align: middle;
  border: 1px solid #dde1e3;
  overflow: visible;
}
.table-header {
  font-weight: bold;
}
.selected {
  display: inline-block;
  border: 1px solid #00b9e6 !important;
  z-index: 100000 !important;
  background: #EBF7FF !important;
  box-sizing: border-box;
  
}
.selected-remove-border {
  border: 0px;
}

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

    </div>
    <div class="table-row">
      <div class="table-cell">
        <span>Table cell</span>
        <div class="draggable-container">
          <div class="draggable-bar"></div>
        </div>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>

    </div>
    <div class="table-row">
      <div class="table-cell">
        <span>Table cell</span>
        <div class="draggable-container">
          <div class="draggable-bar"></div>
        </div>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>

    </div>
    <div class="table-row">
      <div class="table-cell">
        <span>Table cell</span>
        <div class="draggable-container">
          <div class="draggable-bar"></div>
        </div>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>

    </div>
    <div class="table-row">
      <div class="table-cell">
        <span>Table cell</span>
        <div class="draggable-container">
          <div class="draggable-bar"></div>
        </div>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>

    </div>
    <div class="table-row">
      <div class="table-cell">
        <span>Table cell</span>
        <div class="draggable-container">
          <div class="draggable-bar"></div>
        </div>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>

    </div>
    <div class="table-row">
      <div class="table-cell">
        <span>Table cell</span>
        <div class="draggable-container">
          <div class="draggable-bar"></div>
        </div>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>

    </div>
    <div class="table-row">
      <div class="table-cell">
        <span>Table cell</span>
        <div class="draggable-container">
          <div class="draggable-bar"></div>
        </div>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>

    </div>
    <div class="table-row">
      <div class="table-cell">
        <span>Table cell</span>
        <div class="draggable-container">
          <div class="draggable-bar"></div>
        </div>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>

    </div>
    <div class="table-row">
      <div class="table-cell">
        <span>Table cell</span>
        <div class="draggable-container">
          <div class="draggable-bar"></div>
        </div>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>

    </div>
    <div class="table-row">
      <div class="table-cell">
        <span>Table cell</span>
        <div class="draggable-container">
          <div class="draggable-bar"></div>
        </div>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>
      <div class="table-cell">
        <span>Table cell</span>
      </div>

    </div>
  </div>
</div>

Answer 2

我同意@lonut，但你有没有想过不使用边框？这是一个使用 box-shadow: inset ... 的示例。好处是，它是一个阴影，而不是边框，所以它不会占用单元格的任何 space，这可能有助于不弄乱任何文本的位置。

这纯粹是表现形式，不会影响单元格的显示方式。

代码：

.selected{
  box-shadow: inset 0 0 0 3px #ff0000;
}

也就是说：

inset – 阴影内部而不是外部
0 – x 轴上的像素，因此与元素对齐
0 – y 轴上的像素，因此与元素对齐
0 - 模糊，所以有一个坚实的外观
3px - 展开，所以填充 3px（你可以将其视为 border-width）
#ff0000 - 将框阴影设为红色

这是一个工作示例：

https://jsfiddle.net/9ntxmLk4/1/

使用 "display: table-cell" 的错误边框行为

Bad border behavior using "display: table-cell"

css

css-tables