处理溢出表中的行数据

我在我的网页中有一个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

处理溢出表中的行数据

回答

相关问题