Need to make an annual schedule. Events must be placed directly on the schedule. I have already sketched something, but some questions have arisen.

enter image description here

  1. Is it possible to ensure that the background color of the cells climbs to the border? (Red arrow shows) Now I paint over the cell itself. The border of your color. I would like the cell to be like a solid, with the border visible in the background. Maybe you can somehow set the opacity of the border?

  2. When you hover over a background area (event), you need to highlight the path to this event (green dotted line). I set a special style for the cells that need to be pushed when hovering over an event. But I wondered how now to write a selector that would select these cells? With the selector ~, I could pop the cells after my event. But I need to push up. As far as I know, there is no such selector in css, which would allow to stylize the previous elements. Is there any way to solve this problem?

    2 answers 2

    About opacity - there are colors in the format rgba (r,g,b,a) , where a - sets the transparency (as the opacity for the color). If you understand correctly about the way - you will not do without javascript

     var table = $('#table'); table.on('mousemove', function(event) { if (event.target.tagName != 'TD') { return; } else { //Обнуляем стиль ячеек $('td').css({ 'background': 'inherit' }) //Получаем элемент по которому кликнули var target = event.target; //Выбранный элемент "подсвечиваем" цветом $(target).css({ 'background': '#212121' }) //Берем всех соседей выбранного элемента выше по дереву и подсвечиваем "путь" $(target).prevAll().css({ 'background': 'red' }) } }) 
     table { border-collapse: collapse; } table, th, td { border: 1px solid rgba(0, 0, 0, 0.1); } th { background: lightblue; padding: 10px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table"> <thead> <tr> <th>lorem</th> <th>lorem</th> <th>lorem</th> <th>lorem</th> </tr> </thead> <tbody> <tr> <td>lorem</td> <td>lorem</td> <td>lorem</td> <td>lorem</td> </tr> <tr> <td>lorem</td> <td>lorem</td> <td>lorem</td> <td>lorem</td> </tr> <tr> <td>lorem</td> <td>lorem</td> <td>lorem</td> <td>lorem</td> </tr> </tbody> </table>

    • Thank. What do you think will look like a better solution using JavaScript? - Uladzislau Radzko
    • @UladzislauRadzko, added an example of implementation, have you conceived this behavior? - nueq
    • @UladzislauRadzko, I made a selection inline styles - you can hang your css classes on the active cell and on the neighbors - nueq
    • I already realized the similar logic on css. The idea is similar: paint all the cells red, then select the cell that the user points to, paint it black and, using the selector ~, select all the next cells after the selected one and paint them white. But there was a question how to push the way from above. - Uladzislau Radzko

     table { background-color: red; border-collapse: collapse; } td { background-color: blue; border-right: 3px solid blue; border-top: 3px solid red; border-bottom: 3px solid red; } td:hover { border-bottom: 3px dotted white; } 
     <table> <tr> <td>правая сторона рамки окрашена тем же цветом что и фон</td> <td> --> а это правая ячейка </td></tr> </table>