0

I have a clickable grid in which the cells toggle colour on clicking. I need to put some numbers along the borders of the grid. What is the best way to include that?

Final result should look like 

        4     
        1 5 3
   1,2  [][][]  
 1,4,5  [][][]
   1,3  [][][]

Here is my JSfiddle without the surrounding numbers.

Alvis
  • 181
  • 7

2 Answers2

0

Would using the existing table cells work as in https://jsfiddle.net/z9shwh0q/ If not you could create another table next to it and place these tables in a few wrappers.

<div class="top-key"
    TOP KEY ETC
</div>  

<div class="left-key">
 TABLE FOR LEFT KEY ETC
</div>

<div class="clickable-table">
   CURRENT TABLE
</div>

Then you would us CSS to postion these

Al-76
  • 1,738
  • 6
  • 22
  • 40
0

I would define extra row / column which would be styled differently, and added distinct class (so you can avoid attaching listeners to these), pretty much like @Aly Sebastien outlined.

Then have your custom numbers in them.

If you want to create even smaller footprint, you could attach :before pseudos with content, and position them via css on the edges (see Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery)

Community
  • 1
  • 1
NenadP
  • 585
  • 7
  • 24