Question

如果我们想要达到以下目的，即设置边框的方式使边框的右下角较厚，并在悬停时显示加号。

我做了什么：我已经在表格中选择了单元格。正常边界。甚至尝试过边框造型，但大部分都是圆形或截断边框，这里没有用。

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

那么，我们如何才能自定义边框以仅使用css和html获得所需的效果？ select.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>）。在div为relative时创建单元格absolute允许我们为<td>边提供坐标。一旦定位在右下角，我们会为div提供:hover上显示的一些动态内容。在:hover处理时，会出现伪元素::before和::after。它们为position，但relative值为::before，因为我们希望将::after和position的字体相对于其原始位置移动，而不是移动到另一个<td> 1}} ed元素（就像我们之前对每个div.pad和div。
所做的那样
关于position:absolute造型的特别说明。

bottom:0允许我们轻松选择右下角。如果right:0和.pad恰好将.pad置于角落，那么我们可以继续使用负长度值，以便outline:2px solid white坐在中间位置并且距离单元格一半/ table borders。

添加了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>

try : surname = str(e2.get()) # check if surname is not empty if len(surname) <= 0 : errors += "\nSurname cannot be blank." else : # check if surname is alphabetical for i in str(surname) : # also, allow for hyphens and apostrophes if not(i.isalpha() or i == "'" or i == '-') : errors += "\nSurname not valid - must be alphabetical." except : errors += "\nSurname not valid."

表格单元格的样式边框

1 个答案: