CSS Перекрытие нескольких фоновых изображений в ячейке таблицы? - PullRequest
Новая
       0

CSS Перекрытие нескольких фоновых изображений в ячейке таблицы?

0 голосов
/ 28 мая 2020

Я не могу понять, как двигаться красные и зеленые блоки над розовой полосой в фрагменте кода ниже:

1002 * (мусор, чтобы задать вопрос с большим количеством кода АБВГДЕЖЗИКЛМНОПРСТУФХЧШЭЮЯ zyxwvutsrqponmlkjihgfedcba АБВГДЕЖЗИКЛМНОПРСТУФХЧШЭЮЯ zyxwvutsrqponmlkjihgfedcba АБВГДЕЖЗИКЛМНОПРСТУФХЧШЭЮЯ zyxwvutsrqponmlkjihgfedcba АБВГДЕЖЗИКЛМНОПРСТУФХЧШЭЮЯ zyxwvutsrqponmlkjihgfedcba АБВГДЕЖЗИКЛМНОПРСТУФХЧШЭЮЯ zyxwvutsrqponmlkjihgfedcba АБВГДЕЖЗИКЛМНОПРСТУФХЧШЭЮЯ zyxwvutsrqponmlkjihgfedcba АБВГДЕЖЗИКЛМНОПРСТУФХЧШЭЮЯ zyxwvutsrqponmlkjihgfedcba abcdefghijklmnopqrstuvwxyz zyxwvutsrqponmlkjihgfedcba) 
.timeline {
    text-align: center;
    vertical-align: middle;
    height: 30px;
    width: 50px;
    position: relative;
}

.timeline span {
    vertical-align: middle;
    display: inline-block;
}

.timeline-node-red {
    width: 24px;
    height: 24px;
    background-color: red;
    color: white;
    display: inline-block;

}

.timeline-node-green {
    width: 24px;
    height: 24px;
    background-color: green;
    color: white;
    display: inline-block;

}

.timeline-node-white {
    width: 24px;
    height: 24px;
    background-color: aliceblue;
    display: inline-block;

}

.timeline .start {
    width: 24px;
    height: 24px;
    background-color: green;
    color: white;
    display: inline-block;
}

.timeline .start:after {
    content: '';
    display: inline-block;
    position: absolute;

    right: -1px;
    width: 50%;
    height: 10px;
    top: 17px;
    background-color: #e88f9a;
}

.timeline .end {
    width: 24px;
    height: 24px;
    background-color: green;
    color: white;
    display: inline-block;
}

.timeline .end:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0px;

    width: 50%;
    height: 10px;
    top: 17px;
    background-color: #e88f9a;
}

.timeline.node:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0px;

    width: 100%;
    height: 10px;
    top: 17px;
    background-color: #e88f9a;
}

.timeline.node span,
.timeline.has-right span {
    display: inline-block;
}

table.timeline-table {
    border-collapse: collapse;
    overflow: scroll;
}

table.timeline-table tr:nth-child(even) {
    background-color: lightblue;
}

table.timeline-table tr th,
td {
    padding: 10px;
}

table.timeline tr td {
    text-align: center;
    vertical-align: middle;
    height: 30px;
    width: 50px;
    position: relative;
}


::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>


    <div style="width: 100%; overflow: scroll;">

    <table class="timeline-table">

        <tr style="color: white; background-color: #79b6f5;">
            <th style="min-width: 100px;">Driver</th>
            <th>08:00</th>
            <th>08:30</th>
            <th>09:00</th>
            <th>09:30</th>
            <th>10:00</th>
            <th>10:30</th>
            <th>11:00</th>
            <th>11:30</th>
            <th>12:00</th>
            <th>12:30</th>
            <th>13:00</th>
            <th>13:30</th>
        </tr>
        
        
        <tr>
            <td class="">Some Driver </td>
            <td class="timeline"></td>
            <td class="timeline"></td>
            <td class="timeline"><span class="start"></span>
            </td>
            <td class="timeline node"><span></span></td>
            <td class="timeline node"><span class="timeline-node-red" style="margin-left: 20px;">5</span></td>
            <td class="timeline node"><span></span></td>
            <td class="timeline node"><span></span>
            </td>
            <td class="timeline"><span class="end"></span>
            </td>
        </tr>

    </table>
</div>
  </body>
</html>

1 Ответ

1 голос
/ 28 мая 2020

Вы применили жестко запрограммированное положение сверху и слева ко многим элементам, которые искажают ваш элемент, а также положение, а также относительное и абсолютное отношение также не выполнено должным образом, я сделал некоторые исправления в относительном и абсолютном положении в зависимости от отношения td и span и изменил жестко заданный пиксель на свойство преобразования для динамического c высота и ширина элемента. 

.timeline {
    text-align: center;
    vertical-align: middle;
    height: 30px;
    width: 50px;
    position: relative;
}

.timeline span {
    vertical-align: middle;
    display: inline-block;
position: relative;
}

.timeline-node-red {
    width: 24px;
    height: 24px;
    background-color: red;
    color: white;
    display: inline-block;

}

.timeline-node-green {
    width: 24px;
    height: 24px;
    background-color: green;
    color: white;
    display: inline-block;

}

.timeline-node-white {
    width: 24px;
    height: 24px;
    background-color: aliceblue;
    display: inline-block;

}

.timeline .start {
    width: 24px;
    height: 24px;
    background-color: green;
    color: white;
    display: inline-block;
    position: relative;
}

.timeline .start:after {
    content: '';
    display: inline-block;
    position: absolute;
    right: -100%;
    width: 100%;
    height: 10px;
    top: 50%;
    background-color: #e88f9a;
    transform: translateY(-50%);
}

.timeline .end {
    width: 24px;
    height: 24px;
    background-color: green;
    color: white;
    display: inline-block;
}

.timeline .end:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: -100%;
    width: 100%;
    height: 10px;
    top: 50%;
    background-color: #e88f9a;
    transform: translateY(-50%);
}

.timeline.node:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0px;

    width: 100%;
    height: 10px;
    top: 20px;
    background-color: #e88f9a;
}

.timeline.node span,
.timeline.has-right span {
    display: inline-block;
}

table.timeline-table {
    border-collapse: collapse;
    overflow: scroll;
}

table.timeline-table tr:nth-child(even) {
    background-color: lightblue;
}

table.timeline-table tr th,
td {
    padding: 10px;
}

table.timeline tr td {
    text-align: center;
    vertical-align: middle;
    height: 30px;
    width: 50px;
    position: relative;
}


::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>


    <div style="width: 100%; overflow: scroll;">

    <table class="timeline-table">

        <tr style="color: white; background-color: #79b6f5;">
            <th style="min-width: 100px;">Driver</th>
            <th>08:00</th>
            <th>08:30</th>
            <th>09:00</th>
            <th>09:30</th>
            <th>10:00</th>
            <th>10:30</th>
            <th>11:00</th>
            <th>11:30</th>
            <th>12:00</th>
            <th>12:30</th>
            <th>13:00</th>
            <th>13:30</th>
        </tr>
        
        
        <tr>
            <td class="">Some Driver </td>
            <td class="timeline"></td>
            <td class="timeline"></td>
            <td class="timeline"><span class="start"></span>
            </td>
            <td class="timeline node"><span></span></td>
            <td class="timeline node"><span class="timeline-node-red" style="margin-left: 20px;">5</span></td>
            <td class="timeline node"><span></span></td>
            <td class="timeline node"><span></span>
            </td>
            <td class="timeline"><span class="end"></span>
            </td>
        </tr>

    </table>
</div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...