Как получить div (зеленая линия) в одной строке таблицы, чтобы перейти к следующей

Я пытаюсь создать простой календарь расписания. Я не могу получить событие (зеленая линия) в div одной строки таблицы, чтобы продолжить в следующей строке в случаях, когда событие охватывает несколько дней. Как видно из прилагаемого рисунка Календарь

Пожалуйста помоги. Код: JS.do

javascript,html,css,css3,

0

Ответов: 3

0

Используйте второй, <div>а затем вы можете делать все, что хотите. Например:

<table>
        <thead>
        <tr>
                <th style="height:10px; width:100px">Monday</th>
            <th style="height:10px; width:100px">Tuesday</th>
            <th style="height:10px; width:100px">Wednesday</th>
            <th style="height:10px; width:100px">Thursday</th>
            <th style="height:10px; width:100px">Friday</th>
            <th style="height:10px; width:100px">Saturday</th>
            <th style="height:10px; width:100px">Sunday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
                <td><div style="height:100px; width:100px; background-color:red; ">1
                <div style="height:10px; width:1000px; background-color:green;"></div>
            </div></td>
            <td><div style="height:100px; width:100px">2</div></td>
            <td><div style="height:100px; width:100px">3</div></td>
            <td><div style="height:100px; width:100px">4</div></td>
            <td><div style="height:100px; width:100px">5</div></td>
            <td><div style="height:100px; width:100px">6</div></td>
            <td><div style="height:100px; width:100px">7</div></td>
        </tr>
        <tr>
                <td><div style="height:100px; width:100px">
                8
                <div style="height:10px; width:1000px; background-color:green;"></div>
                </div></td>
            <td><div style="height:100px; width:100px">9</div></td>
            <td><div style="height:100px; width:100px">10</div></td>
            <td><div style="height:100px; width:100px">11</div></td>
            <td><div style="height:100px; width:100px">12</div></td>
            <td><div style="height:100px; width:100px">13</div></td>
            <td><div style="height:100px; width:100px">14</div></td>
        </tr>
    </tbody>
</table>
<script></script>

0

Обновить:

В случае нескольких нижних границ для нескольких событий в день.

скрипка

Оригинал:

С вашим подходом вы не можете получить то, что вам нужно. Я немного изменил ваш код, надеюсь, именно это вам и нужно.

скрипка

<style>
table {
    border-collapse: collapse;
}

td {
    border-bottom: 10px solid white;
    width:100px;
    height:80px;
    vertical-align: top;
}

th {
    height:10px;
    width:100px;
}

.red {
    background-color: red;
}

.event {
    border-bottom-color: green;
}
</style>
<table>
    <thead>
        <tr>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saturday</th>
            <th>Sunday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="red event">1</td>
            <td class="event">2</td>
            <td class="event">3</td>
            <td class="event">4</td>
            <td class="event">5</td>
            <td class="event">6</td>
            <td class="event">7</td>
        </tr>
        <tr>
            <td class="event">8</td>
            <td class="event">9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
    </tbody>
</table>
-1

<div>Никогда не оборачивает, всегда прямоугольная форма. Вы должны использовать два <div>с.

Пример:

<div>Before</div>
<div>
   ... your content here ...
</div>
<div>After</div>
JavaScript, HTML, CSS, CSS3,
Похожие вопросы
Яндекс.Метрика