I would like to align a table cell to a column where it belongs:
_________________________________________
| | First Place | Second Place |
| | | |
_________________________________________
| 09:00 | | Break fast |
| | | 09:10 : 09:50 |
_________________________________________
But what i get is the next:
_________________________________________
| | First Place | Second Place |
| | | |
_________________________________________
| 09:00 | Break fast | |
| | 09:10 : 09:50 | |
_________________________________________
The html code / css I am using is the next. Any idea how to achieve the above effect by teaking my HTML or CSS is really welcome.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/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;
}
</style>
<title>Tabular Data</title>
</head>
<body>
<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"> </td></tr>
<tr><td rowspan="8" headers="secondPlace"><p>Breakfast 9:10 - 9:50</p></td></tr>
<tr><td class="noDisplay"> </td></tr>
<tr><td class="noDisplay"> </td></tr>
<tr><td class="noDisplay"> </td></tr>
<tr><td class="noDisplay"> </td></tr>
<tr><td class="noDisplay"> </td></tr>
<tr><td class="noDisplay"> </td></tr>
<tr><td class="noDisplay"> </td></tr>
<tr><td class="noDisplay"> </td></tr>
<tr><td class="noDisplay"> </td></tr>
</tbody>
</table>
</body>
</html>
It would be great to hear from a CSS solution!