0

我的网页中有一个 HTML 表格，其中可能有很多行，因为它是动态生成的。我面临的问题是，当行数据溢出可用宽度时，整个表格 css 都会受到干扰。

我需要一个解决方案，如果行数据溢出，它应该分成多行，以适应所有数据。

HTML如下：

<table>
<tr>
<td class='first' >From :</td>
<td class='second'>Gaurav Sachdeva &lt;gauravs23@ymail.com&gt;</td>
</tr>
<tr>
<td class='first' >To :</td>
<td class='second' >nerdsachdeva@gmail.com
   &lt;nerdsachdeva@gmail.com&gt;nerdsachdeva@gmail.com
   &lt;nerdsachdeva@gmail.com&gt;nerdsachdeva@gmail.com
   &lt;nerdsachdeva@gmail.com&gt;nerdsachdeva@gmail.com
   &lt;nerdsachdeva@gmail.com&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大师都在那里....请帮忙！

4

3 回答 3

2

我看到的问题实际上是“From :”和“To :”和“Date :”可能各自分成两行。要解决此问题，请添加

.first { white-space: nowrap; }

要解决您没有询问的另一个布局问题，请考虑添加以下内容：

td { vertical-align: top; }

如果数据中的电子邮件收件人列表确实是示例中的格式，那么它会有点奇怪并且会呈现奇怪，因为浏览器可以在任何空格处插入换行符，但不能在“>”之后。用逗号或分号和空格分隔地址更为正常。如果不能使用空格，实际的选择是<wbr>在允许的断点处插入标签，如John Doe <foo@example.com><wbr>Jane Doe <bar@example.com>.

于 2012-07-31T08:04:17.703 回答
1

只需将其替换css为以下一个或设置宽度为你Table我可以看到那里为Width你的桌子定义。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-31T07:39:11.943 回答
0

好的，现在在这里检查

<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;gauravs23@ymail.com&gt;</td>
</tr>
<tr>
<td class='first' style="width:57px;">To :</td>
<td class='second' >nerdsachdeva@gmail.com
   &lt;nerdsachdeva@gmail.com&gt;nerdsachdeva@gmail.com
   &lt;nerdsachdeva@gmail.com&gt;nerdsachdeva@gmail.com
   &lt;nerdsachdeva@gmail.com&gt;nerdsachdeva@gmail.com
   &lt;nerdsachdeva@gmail.com&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-31T08:15:16.403 回答