html - making a cell border exactly like Excel's fill handle? -
i trying make webpage looks excel spreadsheet. instead of using other tools images, want using html , css only.
a screenshot of local webpage @ imgur:
but problem don't know how put square @ bottom-right of border of cell b2, looks fill handle in excel.
please me. table coding 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>
i able hack combination of black box white borders along absolute positioning after relative outer div.
looks this:
full demo: http://jsfiddle.net/68kaz/1/
html (for 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; }
Comments
Post a Comment