使用＆＃34; display：table-cell＆＃34;

时间：2017-01-10 15:45:43

标签： css css-tables

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

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

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/

请您帮我理解如何避免更改单元格的宽度和高度？

2 个答案:

答案 0 :(得分：1)

在box-sizing: border-box;上使用.selected。这是一个神奇的工作者：

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

答案 1 :(得分：1)

我同意@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/

相关问题
最新问题