5

要素スタイルの幅を無視する HTML テーブル

特定のセルに非常に長いテキスト コンテンツが含まれる HTML テーブルがあります。

jQuery を使用してこれらのセルの幅 (ピクセル単位) を指定したいのですが、レンダリングされたテーブルは指定された幅を無視します。

テーブルがこの幅を尊重するように強制する方法はありますか?

ありがとう！

JSFiddle : http://jsfiddle.net/sangil/6hejy/35/

(セルを調べると、計算された幅が要素スタイルの幅と異なることがわかります)

HTML :

<div id="tblcont" class="tblcont">
 <table id="pivot_table">
 <tbody>
   <tr>
      <th id="h0" >product</th>
      <th id="h1" >price</th>
      <th id="h2" >change</th>
   </tr>         
   <tr>
      <!-- this is the cell causing trouble -->
      <td id="c00" >Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</td>
      <td id="c01" >3212</td>
      <td id="c02" >219</td>         

   </tr>
   <tr>
      <td id="c10" >Acer</td>
      <td id="c11" >3821</td>
      <td id="c12" >206</td>         

   </tr>
</tbody>
</table>
</div>

CSS :

.tblcont {
  overflow: hidden;
  width: 500px;
}

table {
  table-layout: fixed;
  border-collapse: collapse; 
  overflow-x: scroll; 
  border-spacing:0; 
  width: 100%;
}

th, td {
 overflow: hidden;
 text-overflow: ellipsis;
 word-wrap: break-word;
}

th {
 height: 50px;
}

<strong>Javascript:

$(document).ready(function() {

  // THIS LINE HAS NO EFFECT!
  $('#c00').width(30);
});​
4

4 に答える 4

7

あなたのフィドルから、単語の切り捨てなどを適切に行う方法をすでによく理解していることがわかります。次のようなことをすると便利だと思います。

<table>
  <colgroup>
    <col style="width: 30px;" /> <!-- this style affects the whole 1st column -->
    <col />
    <col />
  </colgroup>

  <!-- the rest of your table here -->
</table>

このメソッドは、HTML仕様に準拠した方法で機能し、列全体のサイズを変更します。上記のように、代わりdisplayにセルのをに変更すると、テーブルのフローからセルが削除され、他のスタイルの変更が機能しなくなる可能性があります。inline-block

col上記のコードを使用して全体をスタイリングすることにより、代わりにtable要素のtable-layout: fixedスタイリングを有利に使用します。

さらに、セルが使用するように設定されていることに気付きました。quirksmodeに関するこの記事text-overflow: ellipsis;をチェックして、機能しない理由を理解してください。必要な修正は、次の編集を行うことです。

th, td {
    border: solid #4682B4 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    text-align: center;

    white-space: nowrap; /* Add this line */
}
于 2012-10-25T16:57:17.280 に答える
6

表のセルはデフォルトでコンテンツに合わせて表示され、幅は無視されます。

すでに提供されている回答に対する他の可能性：

テキストを他のコンテナで囲みます。

<td id="c00" ><div>Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>

幅を変更します。

$('#c00 div').width(30);
于 2012-10-25T16:58:49.167 に答える
2

いくつかの問題があります。

table-layout: fixed列が等しくなるように指示します。

そうすれば、それを取り出しても、テキストは30ピクセルより広く、スペースがないので、それより狭くなる"aaaaaaaaaa"ことはありません。テキストを小さくするか、スペースを追加する必要があります。

最後に、 （引用符で）するwidth必要があります"30px"。

お役に立てば幸いです。

于 2012-10-25T16:56:49.780 に答える
1

これを試して：

$('#c00').css("width","30px");

またはこれ：

<td id="c00" style='width:30px'>

IE を使用している場合は、互換モードをオンにする必要がある場合があります。また、適切な jQuery プラグインをインポートしていることを確認してください。

于 2012-10-25T16:53:49.793 に答える