制作一个与 Excel 的填充句柄完全一样的单元格边框？

Posted 2023-03-05

【中文标题】制作一个与 Excel 的填充句柄完全一样的单元格边框？

【英文标题】：Making a cell border exactly like Excel's fill handle?

【发布时间】：2013-08-01 12:59:24

【问题描述】：

我正在尝试制作一个看起来与 Excel 电子表格完全一样的网页。我不想使用图像等其他工具，而是仅使用 html 和 css 来完成。

我本地网页的截图：

但问题是我不知道如何在单元格 B2 边框的右下角放置一个正方形，使其看起来像 Excel 中的填充句柄。

请帮助我。我使用的表格编码是：

<style type="text/css">
.ExcelTableFormationCol 
                          width: 55px;
                          height: 20px;
                          text-align: center;
                          font-family: Arial Narrow;
                          font-size: 14px;
                         

.ExcelTableFormationRow 
                          background-color: #EEEEEE;
                          text-align: center;
                          font-family: Calibri;
                          font-size: 16px;
                          height: 20px;
                         

#LastRow td 
              border-bottom-width: 0px;
            

.LastCol 
           border-right-width: 0px;
         
</style>

<table border="" style="border-collapse: collapse; border-bottom-width: 0px; border-right-width: 0px;">
  <tr style="background-color: #EEEEEE;">
    <td style="width: 25px;"></td>
    <td class="ExcelTableFormationCol">A</td>
    <td class="ExcelTableFormationCol" style="background-color: Gold;">B</td>
    <td class="ExcelTableFormationCol">C</td>
    <td class="ExcelTableFormationCol">D</td>
    <td class="ExcelTableFormationCol">E</td>
    <td class="ExcelTableFormationCol">F</td>
    <td class="ExcelTableFormationCol">G</td>
    <td class="ExcelTableFormationCol">H</td>
    <td class="ExcelTableFormationCol">I</td>
    <td class="ExcelTableFormationCol" style="border-right-width: 0px;">J</td>
  </tr>
  <tr>
    <td class="ExcelTableFormationRow">1</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
  <tr>
    <td class="ExcelTableFormationRow" style="background-color: Gold;">2</td>
    <td></td>
    <td style="border: 3px solid black;"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
  <tr>
    <td class="ExcelTableFormationRow">3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
  <tr>
    <td class="ExcelTableFormationRow">4</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
  <tr>
    <td class="ExcelTableFormationRow">5</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
  <tr>
    <td class="ExcelTableFormationRow">6</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
  <tr>
    <td class="ExcelTableFormationRow">7</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
  <tr>
    <td class="ExcelTableFormationRow">8</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
  <tr id="LastRow">
    <td class="ExcelTableFormationRow">9</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
</table>

【参考方案1】：

解决方案： table border-collapse:collapse;

【参考方案2】：

我能够通过将黑框与白色边框的组合以及相对外部 div 之后的绝对定位来解决这个问题。

看起来像这样：

完整演示：http://jsfiddle.net/68KAZ/1/

HTML（用于光标单元格）

<td style="border: 3px solid black;">
  <div id="ExcelCursorOuter"><div id="ExcelCursor"></div></div>
</td>

CSS：

 #ExcelCursorOuter 
   position: relative;
 

 #ExcelCursor 
   position: absolute;
   top: 8px;
   right: -5px;
   background: #000;
   width: 5px;
   height: 5px;
   border: 1px solid #fff;
   border-right: 0px;
   border-bottom: 0px;
 

【讨论】：

谢谢！你的编码做我想要的。虽然我需要一些时间才能理解它在 CSS 中的工作原理，但现在它起作用了。

但是现在还有一个问题。我想将单元格 B2 显示为在其中输入的一些文本，例如公式。当我键入等号 (=) 开始公式时，第 2 行的高度增加并且填充句柄下降。无论单元格内容如何，​​它都应该在其位置。如何处理？