2

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

我本地网页的截图：

http://imgur.com/VZxiOnt

但问题是我不知道如何在单元格 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>
4

2 回答 2

1

我能够通过黑框与白色边框的组合以及相对外部 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;
 }
于 2013-07-31T20:16:22.997 回答
1

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

于 2016-05-22T22:24:06.243 回答