對齊一個HTML表格單元格的列

我想一個表格單元格對齊列其所屬：對齊一個HTML表格單元格的列

_________________________________________ 
|  | 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的解決方案聽到！

來源

2009-09-10 Sergio del Amo

來自第二小區

來源

2009-09-10 15:29:09

不，不這樣做 - 第二個單元甚至不在所討論單元的同一行。 – Donut 2009-09-10 15:35:27

Doh'!!! 你是對的！ – 2009-09-10 15:49:11

更改此行中刪除「noDisplay」類：

<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);;因爲沒有內容你可能不想要白色背景。

來源

2009-09-10 15:31:48 Donut

很可能你是一個td簡稱！插入空<td></td>並解決問題。

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

來源

2009-09-10 15:33:18 TheVillageIdiot

您在上面的行上缺少一個rowspan。由於看起來您正在嘗試製作雙重日程安排日曆，因此您看起來像沒有在第二位填寫相同的時間（rowspan =「8」）。將noDisplay設置爲.noDisplay {background-color：purple;}並擺脫td上的白色背景真正顯示了發生了什麼。

預覽：其他人說的。

來源

2009-09-10 15:48:35

嘗試在您發佈內容之前再插入一列，並添加此代碼可能會生效 <td rowspan="8" headers="secondPlace"><p>Breakfast <br/>9:10 - 9:50</p></td></tr> 您可以使用適當的css檢查顏色。

來源

2012-06-24 14:27:38

對齊一個HTML表格單元格的列

回答

相關問題