0

TD 幅を文字数に設定したいのですが、たとえば、11 に設定した場合、11 文字のみを表示し、残りは新しい行に配置する必要があります。width プロパティを試してみましたが、ブラウザーや解像度によって表示が異なります。

<table border="1">
    <tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 11-MAR-2013, 13-MAR-2013
    </td>
    </tr>
<tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 11-MAR-2013, 13-MAR-2013
    </td>
    </tr>
<tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 04-MAR-2013, 05-MAR-2013, 07-MAR-2013, 11-MAR-2013, 13-MAR-2013, 12-MAR-2013, 08-MAR-2013, 06-MAR-2013
    </td>
    </tr>
<tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 11-MAR-2013, 13-MAR-2013
    </td>
    </tr>
<tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 06-MAR-2013, 08-MAR-2013, 12-MAR-2013, 13-MAR-2013, 11-MAR-2013, 07-MAR-2013, 05-MAR-2013, 01-MAR-2013
    </td>
    </tr>
    <table>

テーブルの日付を 1 行に表示します。

28-FEB-2013, 06-MAR-2013, 08-MAR-2013, 12-MAR-2013,

のように表示させたい

   28-FEB-2013,
   11-MAR-2013,
   13-MAR-2013,

すべての日付は新しい行にある必要があります。

4

5 に答える 5

3

私が想像できる最も簡単な解決策は次のとおりです。

table tr td+td+td {
  font-size: 100%;
  font-family: monospace;
  width: 8em;
}

http://jsbin.com/elaleg/1/edit

于 2013-03-14T08:31:41.603 に答える
1

次のスタイルを使用して、テキストをタグまたはその他のものでラップできます。

display: inline-block; width: 11em;

JsFiddleをチェック

于 2013-03-14T08:27:36.923 に答える
0 
<html>
 <body>
   <table border="1">
    <tr>
        <td style="width:103px;word-wrap:break-word;">28-FEB-2013, 11-MAR-2013, 13-MAR-2013</td>
    </tr>
</table>
 </body>
</html>

これを試してみてください。解決策が得られることを願っています

于 2013-03-14T08:27:19.577 に答える
0

これを確認できます

またはCSSスタイルの空白を効果的に試してください

white-space: nowrap;
于 2013-03-14T08:27:44.143 に答える
0

ここに私のために働いた1つの解決策があります。td に指定されたクラス名 (payerName など) があり、テーブルに ID (sortable など) があると仮定します。

$(".payerName").css({"white-space":"nowrap"});
$(".payerName").css({"overflow":"hidden"});
$(".payerName").css({"text-overflow":"ellipsis"});
$("#sortable").css("table-layout","fixed");

これは、長い文字列が td に入らないようにするために使用できる一連の手順です。省略記号プロパティは、文字列/値の末尾に「...」を追加します。マウスをホバーしたときに実際の値が表示されるように、title 属性を追加できます。

お役に立てれば！

于 2016-08-04T11:23:09.440 に答える