0

Webページに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：」がそれぞれ2行に分割される可能性があることです。これを修正するには、

.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 に答える