html - 处理表中的溢出行数据

Question

我的网页中有一个 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 高手....请帮忙!

Answer 1

我看到的问题实际上是“发件人:”、“收件人:”和“日期:”可能会分别分成两行。要解决此问题，请添加

.first { white-space: nowrap; } 

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

td { vertical-align: top; }

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