如何最好地突出显示（红色边框、轮廓等）表格单元格。不占用额外空间答案

【问题标题】：How best highlight (red border, outline, etc) a table cell. without taking up extra space如何最好地突出显示（红色边框、轮廓等）表格单元格。不占用额外空间
【发布时间】：2018-11-28 18:55:47
【问题描述】：

如何在不占用额外空间的情况下最好地突出显示表格中的单元格。仅仅设置背景颜色是不够的。（因为它必须是浅色才能使数字/文本可读）。

如果 CSS Outline 可以有圆角就可以了，但是没有圆角它就没有与文档其余部分相同的外观/样式。到目前为止，我最好的方法是在位于单元格上方的绝对元素周围设置边框。但这需要额外的元素，并且它位于 OVER，而不是 UNDER，因此颜色需要具有不透明度，以防它位于相邻单元格中的文本之上。

<style>
td {
    vertical-align:top; position:relative; text-align:right;
}
.bordered { 
position: absolute;width:calc(100% + 20px)!important;left:-10px;top:-5px;border:6px rgba(255,0,0,0.7)solid;border-radius:8px;width:200%;
}
</style>
<body>
<table style="width: 100%">
    <tr>
        <td><span class="bordered">&nbsp;&nbsp;&nbsp;</span>1&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>12</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td><span class="bordered">&nbsp;&nbsp;&nbsp;</span>123</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>1234</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td><span class="bordered">&nbsp;&nbsp;&nbsp;</span>123456789</td>
    </tr>
</table>

a) Outline 可以有圆角吗？

b) 上面没有额外的元素可以完成吗？

c) above 可以定位在单元格下方而不是单元格上方吗？

背景：我有一个 html 应用程序。生成一个“拣货清单”（供操作人员为订单选择正确的产品。它有一个“数量”字段，当它大于 ONE 时，css 会突出显示黄色（但操作人员不会注意到它 - 只是发送一个（其中是通常的数量）。带有黄色背景的 CSS 突出显示 - 如果我们使用红色 - 很难读取数字（黑色）。

没有跨浏览器问题，因为操作人员只是在内部使用 Chrome。

【问题讨论】：

标签： html css html-table background outline

【解决方案1】：

只需让所有的 TD 都有一个 1px 的透明边框，然后在选定的上设置颜色。

td {
  border: 1px solid transparent;
  vertical-align:top;
  text-align:right;
}

.bordered { 
  border-color: red;
  border-radius: 4px;
}

<table style="width: 100%">
  <tr>
    <td class="bordered">&nbsp;&nbsp;&nbsp;1&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>12</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td class="bordered">&nbsp;&nbsp;&nbsp;123</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>1234</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="bordered">&nbsp;&nbsp;&nbsp123456789</td>
  </tr>
</table>

【讨论】：

“不可见”边框占用了我没有的空间。例如它需要 6px 或更大才能显示。我应该提前更好地解释这一点。
查看我的其他答案。

【解决方案2】：

关于朱莉的回答，如果您还应用边界半径，您实际上可以两全其美。例如：

td {
  border: 0px solid transparent;
  box-shadow: 0 0 5px red;
  border-radius: 10px;
}

边框本身是不可见的并且不占用空间，但 box-shadow 现在将跟随预期边框的曲线。您可以调整框阴影参数以使轮廓变硬或模糊。

【讨论】：

绝对是答案的一部分——Tks

【解决方案3】：

如果你不能占用任何空间，那么试试这个：

var btn = document.querySelector('#toggle');
btn.addEventListener('click', () => {
  document.querySelectorAll('[a]').forEach(
    el => {
      el.classList.toggle('bordered');
    }
  );
});

td {
  vertical-align:top;
  text-align:right;
}

.bordered {
  position: relative;
  z-index: 1;
}

.bordered::before {
  border: 4px solid rgba(255,0,0,.5);
  border-radius: 4px;
  bottom: -2px;
  content: '';
  left: -4px;
  position: absolute;
  right: -4px;
  top: -2px;
  z-index: -1;
}

<table style="width: 100%">
  <tr>
    <td a class="bordered">&nbsp;&nbsp;&nbsp;1&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>12</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td a class="bordered">&nbsp;&nbsp;&nbsp;123</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>1234</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td a class="bordered">&nbsp;&nbsp;&nbsp123456789</td>
  </tr>
</table>

<button id="toggle">Toggle</button>

我使用伪元素::before 来显示边框。就像您的示例一样，它是position: absolute，然后我将顶部、左侧、右侧和底部连接到单元格。

点击切换按钮查看边框的添加和删除。

更新

根据您的问题，我将top、left、right 和bottom 更改为负数以避免重叠

【讨论】：

非常聪明的解决方案，但是 1px 的边框不够突出，4px 可能会遮挡内容。
我刚刚更新为包含更粗的边框、z-index 和部分透明度。
我也在尝试否定。 z-index 与您同时 - 它确实将边框向后发送，这确实有帮助。有没有办法可以使用伪元素在单元格范围之外扩展？
啊...刚刚尝试了您的解决方案，我发现我可以将边框移到单元格区域之外。这绝对是一个解决方案 - 谢谢

【解决方案4】：

您可以使用框阴影作为边框。

 .bordered { 
  box-shadow: 0 0 5px red;
}

它不是圆角的，但看起来也不那么方方正正。

【讨论】：