There is a table 20x20. On each of the columns of the table, you need to place a chip that occupies two lines at once and at the same time has three lines of text, one of which should fall on the separation of rows in the table. In this case, the top and bottom of the chips when you click should call different functions. How to solve this problem? I tried with absolute positioning and recalculation of coordinates in the block for each element, but it seems to me that this is far from the most elegant solution. I also tried to take a specific cell for the position of an element, while creeping beyond its borders downwards to the height of the lower cell. Can someone suggest a beautiful solution?

approximate appearance of chips

    2 answers 2

    I made a smaller volume for the table, but I hope the point is clear ...)

    const colors = ['red', 'green', 'blue']; $('p').on('click', (e) => { const p = e.target; switch ($(p).text()) { case 'Text 1': sayHi(); break; case 'Text 2': // do something break; case 'Text 3': sayHello(); break; } $(p).css('color', colors[Math.floor(Math.random() * colors.length)]); }); const sayHi = () => { alert('Hi!'); } const sayHello = () => { alert('Hello!'); } 
     table { border-collapse: collapse } tr {} td { border: 1px solid black; padding: 0; position: relative; } div { background-color: yellow; border: 1px solid black; } div:before { content: ''; background-color: black; display: block; height: 1px; left: 0; position: absolute; top: calc(50% - 1px); width: 100%; } p { cursor: pointer; margin: 0; padding: 5px; text-align: center; } p:nth-child(2) { background-color: yellow; border: 1px solid black; margin: 0 5px; position: relative; } p:hover { color: gray; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td rowspan="2"> <div> <p>Text 1</p> <p>Text 2</p> <p>Text 3</p> </div> </td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td rowspan="2"> <div> <p>Text 1</p> <p>Text 2</p> <p>Text 3</p> </div> </td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td rowspan="2"> <div> <p>Text 1</p> <p>Text 2</p> <p>Text 3</p> </div> </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td rowspan="2"> <div> <p>Text 1</p> <p>Text 2</p> <p>Text 3</p> </div> </td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td rowspan="2"> <div> <p>Text 1</p> <p>Text 2</p> <p>Text 3</p> </div> </td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table>

      Only html / css :

       <table style="border:1px solid #000;" cellspacing="0" cellpadding="0"> <tr> <td height="20" colspan="3" align="center"> 1 </td> </tr> <tr> <td height="10" width="10" style="border-bottom:1px solid #000;">&nbsp;</td> <td rowspan="2" height="20" width="50" align="center" style="border: 1px solid #000;"> 2 </td> <td height="10" width="10" style="border-bottom:1px solid #000;">&nbsp;</td> </tr> <tr> <td height="10">&nbsp;</td> <td height="10">&nbsp;</td> </tr> <tr> <td height="20" colspan="3" align="center"> 3 </td> </tr> </table>

      • one
        here not only html) inline css is also present - Kvilios