Question

我正在尝试制作一个看起来与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>

Answer 1

我能够通过黑框与白色边框的组合以及相对外部div之后的绝对定位来破解它。

看起来像这样：

enter image description here

完整演示：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;
 }

Answer 2

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

使单元格边框与Excel的填充句柄完全相同？

2 个答案: