Совместите 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

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

Answer 2

Изменение этой линии:

<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 3

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

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

Answer 4

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

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

Answer 5

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