Выровнять ячейку таблицы HTML по столбцу

Question

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

_________________________________________
|       |    First Place |  Second Place |
|       |                |               |
_________________________________________
| 09:00 |                | Break fast    |
|       |                | 09:10 : 09:50 |
_________________________________________

Но я получаю следующее:

 _________________________________________   

 |       |    First Place |  Second Place |
 |       |                |               |
  _________________________________________
 | 09:00 | Break fast     |               |
 |       | 09:10 : 09:50  |               |
 _________________________________________

Следующий HTML-код / ​​CSS, который я использую. Любая идея, как добиться вышеупомянутого эффекта, рассказывая мой HTML или CSS, действительно приветствуется.

table.dayEvent {
  background-color: rgb(221, 221, 221);
  border-collapse: separate;
  display: table;
  margin: 0px 0px 20px 0px;
  width: 570px;
}
table.dayEvent caption {
  color: rgb(46, 63, 153);
  font-size: 18px;
  text-transform: uppercase;
  font-weight: bold;
  margin: 10px 0px;
  text-align: left;
}
table.dayEvent thead {
  border-color: inherit;
  display: table-header-group;
  vertical-align: middle;
}
table.dayEvent tr {
  vertical-align: top;
}
table.dayEvent th {
  background: rgb(238, 238, 238);
  padding: 10px;
  text-align: left;
  font-weight: bold;
}
.noDisplay {
  display: none;
}
table.dayEvent td {
  background: white;
  padding: 10px;
}
table.dayEvent td p {
  padding: 20px;
  font-size: 14px;
  line-height: 20px;
}

<table class="dayEvent">
  <thead>
    <tr>
      <th></th>
      <th axis="location" id="firstPlace">FirstPlace</th>
      <th axis="location" id="secondPlace">FirstPlace</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th axis="T09:00" rowspan="12">09:00</th>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td rowspan="8" headers="secondPlace">
        <p>Breakfast 9:10 - 9:50</p>
      </td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
  </tbody>
</table>

Было бы здорово услышать о CSS-решении!

Answer 1

Изменить эту строку:

<tr><td rowspan="8" headers="secondPlace"><p>Breakfast 9:10 - 9:50</p></td></tr>

к этому:

<tr><td rowspan="8"></td><td rowspan="8" headers="secondPlace"><p>Breakfast 9:10 - 9:50</p></td></tr>

Добавляет дополнительный элемент <td> для устранения проблем с выравниванием. Возможно, вы захотите установить background-color: rgb(221, 221, 221); в добавленной ячейке; поскольку там нет контента, вы, вероятно, не хотите белый фон.

Answer 2

Скорее всего, вы один td короткий! Вставьте пустой <td></td>, и это решит проблему.

<tr>
  <td></td>
  <td rowspan="8" headers="secondPlace"><p>Breakfast 9:10 - 9:50</p></td>
</tr>

Answer 3

Попробуйте вставить еще один столбец, прежде чем контент, который вы публикуете, и добавьте этот код, возможно, удастся <td rowspan="8" headers="secondPlace"><p>Breakfast <br/>9:10 - 9:50</p></td></tr> Вы можете проверить цвета с правильным CSS.

Answer 4

Вам не хватает строки в строке над ней. Так как похоже на то, что вы пытаетесь создать календарь с двойным расписанием, похоже, что вы не заполнили столько же времени на первом месте, сколько на втором месте (rowspan = "8"). Установка noDisplay в .noDisplay {background-color: purple;} и избавление от белого фона на тд действительно показывает, что происходит.

На предпросмотре: все остальные.

Answer 5

Удалить класс "noDisplay" из 2-й ячейки