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

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

.first { white-space: nowrap; }

要修复另一个您未提出的布局问题，请考虑添加此问题：

td { vertical-align: top; }

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

Answer 2

将此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; }可以解决问题

{{1}}

Answer 3

好的，请立即查看

<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>

处理表中的溢出行数据

3 个答案: