1

Как должно быть:

Должно быть

Текущий код:

<table border="1">
  <tbody>
    <tr>
      <th colspan="2">Понедельник</th>
    </tr>
    <tr>
      <td rowspan="2">09:30 - 11:00</td>
      <td style="background-color: #FFFFC0;">Группа ТГ-2</td>
    </tr>
    <tr>
      <td style="background-color: #FFFFC0;">Группа НП-3</td>
    </tr>
    <tr>
      <td rowspan="2">11:00 - 13:00</td>
      <td rowspan="2">Уход за полем 2 ч</td>
    </tr>
    <tr>
      <td rowspan="2">13:00 - 14:30</td>
      <td style="background-color: #FFFFC0;">Группа Т-1</td>
    </tr>
    <tr>
      <td style="background-color: #FFFFC0;">Группа Т-2</td>
    </tr>
  </tbody>
</table>

После объединения ячеек во втором столбце ("Уход за полем"), всё слетает:

введите сюда описание изображения

Что я делаю не так?

1
  • проблему покажите так как не ясно что там и куда летит ... покажите как было как надо и в итоге что получилось ... объединение ячеек - каких ячеек ?
    – user33274
    21 дек 2017 в 5:58

3 ответа 3

2

Вы у <td rowspan="2">11:00 - 13:00</td> и <td rowspan="2">Уход за полем 2 ч</td> указали rowspan="2". Соответственно, в следующей строке tr первые две ячейки будут заняты ячейками из предыдущей строки, что приведёт к тому, что ячейка <td rowspan="2">13:00 - 14:30</td> будет уже третьей по счету и отображаться правее вышеупомянутых двух.

Для получения результата как на скриншоте можно, например, добавить пустую строку tr, дабы "компенсировать" rowspan у <td rowspan="2">11:00 - 13:00</td>, а у <td rowspan="2">Уход за полем 2 ч</td> убрать rowspanи добавить перевод строки, чтобы эта ячейка занимала две строки:

<table border="1">
  <tbody>
    <tr>
      <th colspan="2">Понедельник</th>
    </tr>
    <tr>
      <td rowspan="2">09:30 - 11:00</td>
      <td style="background-color: #FFFFC0;">Группа ТГ-2</td>
    </tr>
    <tr>
      <td style="background-color: #FFFFC0;">Группа НП-3</td>
    </tr>
    <tr>
      <td rowspan="2">11:00 - 13:00</td>
      <td>Уход за полем 2 ч<br/>&nbsp;</td>
    </tr>
    <tr></tr>
    <tr>
      <td rowspan="2">13:00 - 14:30</td>
      <td style="background-color: #FFFFC0;">Группа Т-1</td>
    </tr>
    <tr>
      <td style="background-color: #FFFFC0;">Группа Т-2</td>
    </tr>
  </tbody>
</table>


А можно и вовсе избавиться от rowspan и доп. строки, остановившись просто на переводе строки:

<table border="1">
  <tbody>
    <tr>
      <th colspan="2">Понедельник</th>
    </tr>
    <tr>
      <td rowspan="2">09:30 - 11:00</td>
      <td style="background-color: #FFFFC0;">Группа ТГ-2</td>
    </tr>
    <tr>
      <td style="background-color: #FFFFC0;">Группа НП-3</td>
    </tr>
    <tr>
      <td>11:00 - 13:00</td>
      <td>Уход за полем 2 ч<br/>&nbsp;</td>
    </tr>
    <tr>
      <td rowspan="2">13:00 - 14:30</td>
      <td style="background-color: #FFFFC0;">Группа Т-1</td>
    </tr>
    <tr>
      <td style="background-color: #FFFFC0;">Группа Т-2</td>
    </tr>
  </tbody>
</table>


Отображение похоже на представленное в вопросе как минимум в браузере Google Chrome 63.0.3239.84

1

А зачем вам лишние td rowspan="2"? Может, всё-таки, так:

    <table border="1">
    <tbody>
        <tr>
            <th colspan="2">Понедельник</th>
        </tr>
        <tr>
            <td rowspan="2">09:30 - 11:00</td>
            <td style="background-color: #FFFFC0;">Группа ТГ-2</td>
        </tr>
        <tr>
            <td style="background-color: #FFFFC0;">Группа НП-3</td>
        </tr>
        <tr>
            <td>11:00 - 13:00</td>
            <td>Уход за полем 2 ч</td>
        </tr>
        <tr>
            <td rowspan="2">13:00 - 14:30</td>
            <td style="background-color: #FFFFC0;">Группа Т-1</td>
        </tr>
        <tr>
            <td style="background-color: #FFFFC0;">Группа Т-2</td>
        </tr>
    </tbody>
    </table>

-1

Проблема в том, что за понедельником следует вторник. Поэтому высота ячеек критична. Я нашел, хоть и корявое, но более менее подходящее решение

<html>
    <head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
    width: 250px;
    border-spacing: 0;
    border: 1px solid lightsteelblue;
}    

td.time{
    width: 30px;
    font-size: 70%;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    border-top: 1px solid lightsteelblue;
    border-right: 1px solid lightsteelblue;
}

td.resource{
    width: calc(100% - 30px) ;
    padding: 1px;
    font-size: 60%;
    font-weight: 300;
    text-align: left;
    border-top: 1px solid lightsteelblue;
}

td.spliter{
    width: 1px;
    /*display: none;*/
    /*visibility: hidden;*/
    border-top: 1px solid lightsteelblue;
}

td.time, td.resource, td.spliter{
    height: 30px;
}    
</style>
    </head>
    <body>
<table>
<tbody>
    <tr>
        <th colspan="3">Понедельник</th>
    </tr>
    <tr>
        <td class="time" rowspan="2">09:30 - 11:00</td>
        <td class="spliter"></td>
        <td class="resource" style="background-color: #FFFFC0;">Группа ТГ-2</td>
    </tr>
    <tr>
        <td class="spliter"></td>
        <td class="resource" style="background-color: #FFFFC0;">Группа НП-3</td>
    </tr>
    <tr>
        <td class="time" rowspan="2">11:00 - 13:00</td>
        <td class="spliter"></td>
        <td class="resource" rowspan="2">Уход за полем 2 ч</td>
    </tr>
    <tr>
        <td class="spliter"></td>
    </tr>
    <tr>
        <td class="time" rowspan="2">13:00 - 14:30</td>
        <td class="spliter"></td>
        <td class="resource" style="background-color: #FFFFC0;">Группа Т-1</td>
    </tr>
    <tr>
        <td class="spliter"></td>
        <td class="resource" style="background-color: #FFFFC0;">Группа Т-2</td>
    </tr>
</tbody>
</table>
    </body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.