處理溢出表中的行數據

我在我的網頁中有一個HTML表格，並且可能會有很多行，因爲它是動態生成的。我面臨的問題是，當行數據溢出可用寬度時，整個表css會受到干擾。處理溢出表中的行數據

我需要一個解決方案，如果行數據溢出，它應該被拆分成多行，以適應所有數據。

的HTML如下：

<table> 
<tr> 
<td class='first' >From :</td> 
<td class='second'>Gaurav Sachdeva &lt;[email protected]&gt;</td> 
</tr> 
<tr> 
<td class='first' >To :</td> 
<td class='second' >[email protected] 
    &lt;[email protected]&gt;[email protected] 
    &lt;[email protected]&gt;[email protected] 
    &lt;[email protected]&gt;[email protected] 
    &lt;[email protected]&gt;</td> 
</tr> 
<tr> 
<td class='first'>Date :</td> 
    <td class='second'>Sun, 1 Jul 2012 18:30:48 +0800 (SGT)</td> 
</tr> 
</table>

的CSS如下：

.first{ 
font-size:14px; 
text-align:right; 
font-weight:bold; 
color: grey; 
} 
.second{ 
padding-left:10px; 
font-size:14px; 
font-weight: bold; 
color: black; 
}

所有的CSS大師那裏....請幫助！

來源

2012-07-31 Gaurav Sachdeva

我真的不知道你所說的*它應該在未來行*是什麼意思？你希望表格寬度是固定的，如果溢出則分割文本？或者你只是想對齊兩欄中的文字？ – Niklas 2012-07-31 07:41:32

是的，我希望表格寬度是固定的，並將文本分成多行，如果它過度..... – 2012-07-31 08:00:19

的問題，因爲我看到它是真的「從：」和「To：」和「日期」可分別獲得分兩行。爲了解決這個問題，添加

.first { white-space: nowrap; }

要解決的另一個佈局的問題，你沒有問一下，考慮增加這一點，太：

td { vertical-align: top; }

如果數據電子郵件收件人列表是真的格式在這個例子中，它有點奇怪，並且會被奇怪地渲染，因爲瀏覽器可能會在任何空間插入換行符，但不會在「>」之後插入。用逗號或分號和空格分隔地址更爲正常。如果你不能使用空格，實際的選擇是在允許的斷點處插入<wbr>標籤，如John Doe <[email protected]><wbr>Jane Doe <[email protected]>。

來源

2012-07-31 08:04:17

你的答案是正確的目標jukka .....非常感謝....你讓我的工作變得簡單:) – 2012-07-31 08:10:29

只需更換這css與下面的一個或者設置寬度爲您Table我可以看到，有要Width defiened爲你的表。 Width可能會解決問題

.first 
{ 
font-size:14px; 
text-align:right; 
font-weight:bold; 
color: grey; 
} 

.second 
{ 
padding-left:10px; 
font-size:14px; 
font-weight: bold; 
color: black; 
overflow:hidden; 
}

來源

2012-07-31 07:39:11

@varun ....溢出隱藏將隱藏我的數據....這不是我的要求... 。我想顯示所有的數據在下一行，如果它溢出.... – 2012-07-31 07:58:45

確定這裏檢查現在

<style> 
.first{ 
font-size:14px; 
text-align:right; 
font-weight:bold; 
color: grey; 

} 
.second{ 
padding-left:10px; 
font-size:14px; 
font-weight: bold; 
color: black; 
    overflow:hidden; 
} 

</style> 
<table cellspacing="5px" cellpadding="5px" style="width:525px;"> 
<tr> 
<td class='first' style="width:57px;">From :</td> 
<td class='second'>Gaurav Sachdeva &lt;[email protected]&gt;</td> 
</tr> 
<tr> 
<td class='first' style="width:57px;">To :</td> 
<td class='second' >[email protected] 
    &lt;[email protected]&gt;[email protected] 
    &lt;[email protected]&gt;[email protected] 
    &lt;[email protected]&gt;nerdsa[email protected] 
    &lt;[email protected]&gt;</td> 
</tr> 
<tr> 
<td class='first' style="width:57px;">Date :</td> 
    <td class='second'>Sun, 1 Jul 2012 18:30:48 +0800 (SGT)</td> 
</tr> 
</table>

來源

2012-07-31 08:15:16

處理溢出表中的行數據

回答

相關問題