使用"display: table-cell"的不良边框行为

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

我确实成功地使用主表结构，使用有用的 display: table 属性，但是当我尝试将 CSS 边框样式应用于单元格时遇到了一些困难（本文末尾的小提琴链接）。单元格的宽度和高度正在增加，我无法避免它与边框属性一起播放。

.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");
    });

这是小提琴：https://jsfiddle.net/Lc0rE/9ntxmLk4/

你能帮我了解如何避免改变我正在点击的单元格的宽度和高度吗？

在 .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>

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

它纯粹是表现性的，而不是影响单元格的显示方式。

法典：

.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/

相关内容

最新更新

热门标签：