rohitmakkar rohitmakkar - 6 months ago 12
HTML Question

making a cell border exactly like Excel's fill handle?

I am trying to make a webpage that looks exactly like an Excel Spreadsheet. Instead of using other tools like images, i want to do it by using html and css only.

A screenshot of my local webpage at imgur:

http://imgur.com/VZxiOnt

But the problem is that i don't know how to put a square at bottom-right of the border of cell B2, so that it looks like a Fill Handle as in Excel.

Please help me. Table coding i have used is:

<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

I was able to hack that up with the combination of black box with white borders along with absolute positioning after relative outer div.

Looks like this:

enter image description here

Full demo: http://jsfiddle.net/68KAZ/1/

HTML (for the cursor cell)

<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;
 }