表格单元格的样式边框

Question

如果我们想要实现以下目标，即设置边框的样式，使边框的右下角较粗，并且在悬停时显示一个加号。

我做了什么：我已经选择了表格中的单元格。正常边框。甚至尝试过边框样式，但大多是圆角或截断边框，这里没用。

我正在尝试做的事情：我正在尝试在 html 表格中模仿 excel 的系列填充功能。功能不是问题。我只是想让这些边框的样式正确，以便更容易理解。

那么，我们怎样才能只使用css和html来自定义边框以获得想要的效果呢？ 选择.js

     $(function () {
        $('td').click(function () {
        $(this).toggleClass('highlight');
        });
     });

table.html

    <table border="1" cellpadding="15">
       <tbody>
          <tr>
            <td>23</td>
            <td>57</td>
            <td>62</td>
          </tr>
       </tbody>
     </table> 

table.css

     .highlight {
         border-radius: 0px 0px 5px 5px;
         border: 2px solid black; 
     }

Answer 1

编辑

在查看我相信我现在理解的图像后，我返回并为每个单元格添加了不同的行为查看更新的代码段。

---

我注意到你可能不希望每个单元格都这样（我倾向于自动编码，就像机器人?。）我对其进行了修改，以便最后一个单元格将具有div.pad。

---

你的意思是每个单元格上都有一个正方形还是只在桌子上？如果是后者，请告诉我，这是一个简单的调整。我用了

• position: relative和absolute

• z-index

• border-collapse: separate

• border-spacing、border 和 outline

• 伪元素::before 和::after

• 2 个 unicode 实体 \1f4c4 ? 和 \2795 ➕

• 当然还有伪类:hover。

• 添加了tr:last-of-type td:last-of-type 以挑出最后一个单元格。

它看起来很笨重，因为没有提到尺寸，但这很好，因为笨重突出了样式及其交互方式。每个方块都是一个 div，它是一个单元格 (<td>) 的子级。使单元格为relative 而div 为absolute 允许我们为其提供与<td> 边缘相关的坐标。定位到右下角后，我们为 div 提供一些出现在:hover 上的动态内容。当:hovered 时，伪元素::before 和::after 出现。它们是positioned，但具有relative 值，因为我们希望将::before 和::after 的字体相对于它们的原始位置移动，而不是移动到另一个positioned 元素（就像我们之前所做的那样每个<td> 和 div。

关于div.pad 样式的特别说明。

• position:absolute 让我们可以轻松选择右下角。如果bottom:0 和right:0 将.pad 紧贴在角落，那么我们可以继续使用负长度值，以便.pad 位于单元格/表格边界的一半和一半之外。

• 添加了outline:2px solid white 而不是border，因为与边框不同，outline 宽度不会取代布局中的其他元素。白色是为了与背景融为一体，使.pad 的外观更像是表格中一个独立但相关的组件。

• z-index:1 也被分配给了.pad，以便从表格边界清楚地定义白色轮廓。

其他要点是：

• 制作边框以便它们被定义为单独的属性，但显示为一个边框（如border-collapse: collapse;）为了避免border-collapse:separate 给出的断开连接的外观，我们使用outline 填充border-spacing of 1px; 如果我们只使用边框，整个表格的大小会显着增加。边框和轮廓样式为inset，最后一个单元格具有超大轮廓样式outset，将其指定为突出显示。

片段

table {
  border-collapse: separate;
  border-spacing: 1px;
  border: 1px inset black;
  outline: 1px inset black;
  table-layout: fixed;
  width: 80vw;
  min-height: 150px;
}

td {
border:1px solid black;
outline: 1px inset black;
}

td:hover {
  border: -3px inset black;
  outline: 6px outset black;
  position: relative;
  z-index:1;
  padding:1px;
}

.pad {
  background: black;
  cursor: pointer;
  position: absolute;
  height: 1px;
  width: 1px;
  z-index: 1;
  bottom: -1px;
  right: -1px;
}

td:hover .pad, 
.pad:hover {
  border: 4px solid black;
  bottom: -9px;
  right: -9px;
  outline: 2px solid white;
  z-index:2;
  padding:2px;
}

.pad:hover::before {
  content: '\1f4c4';
  position: relative;
  top: 20px;
  left: 10px;
  font-size: 1.2rem;
  z-index:2;
}

.pad:hover::after {
  content: '\2795';
  position: relative;
  top: 16px;
  left: 24px;
  font-size: .7rem;
  z-index:2;
}

<table>
  <tbody>
    <tr>
      <td>
        <div class='pad'></div>
      </td>
      <td>
        <div class='pad'></div>
      </td>
      <td>
        <div class='pad'></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class='pad'></div>
      </td>
      <td>
        <div class='pad'></div>
      </td>
      <td>
        <div class='pad'></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class='pad'></div>
      </td>
      <td>
        <div class='pad'></div>
      </td>
      <td>
        <div class='pad'></div>
      </td>
    </tr>
  </tbody>
</table>