HTML CSSテーブルセルの展開を停止する方法

Question

返されたデータセットからの内容でビルドされたテーブルがあります。私がしたいのは、内容の長さ（文字列）に関係なく、「説明」セルの幅が280ピクセル以上にならないようにすることです。私は試しました：

<td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" width="280px" > 

しかし、これは動作していないようです。私はそれを包み込みたくないし、280px以上のものを表示したくない。

Answer 1

HTMLセルの構文が正しくないようです。以下の他のアイデアを試す前に、これがうまくいくかどうかを確認してください。これを自分のテーブル自体に追加することもできます：table-layout：fixed ..

<td style="overflow: hidden; width: 280px; text-align: left; valign: top; whitespace: nowrap;"> 
    [content] 
</td> 

新しいHTML

<td> 
    <div class="MyClass""> 
     [content] 
    </div> 
</td> 

CSSクラス：

.MyClass{ 
    height: 280px; 
    width: 456px; 
    overflow: hidden; 
    white-space: nowrap; 
} 

Answer 2

<table border="1" width="183" style='table-layout:fixed'> 
    <col width="67"> 
    <col width="75"> 
    <col width="41"> 
    <tr> 
    <td>First Column</td> 
    <td>Second Column</td> 
    <td>Third Column</td> 
    </tr> 
    <tr> 
    <td>Row 1</td> 
    <td>Text</td> 
    <td align="right">1</td> 
    </tr> 
    <tr> 
    <td>Row 2</td> 
    <td>Abcdefg</td> 
    <td align="right">123</td> 
    </tr> 
    <tr> 
    <td>Row 3</td> 
    <td>Abcdefghijklmnop</td> 
    <td align="right">123456</td> 
    </tr> 
</table> 

私はそれが動作しますが、それは古い学校だけど、ことを試してみてください。

も、この追加することもできます。もちろん

<style> 
    td {overflow:hidden;} 
</style> 

を、あなたは別のリンクされたスタイルシートでこれを入れて、インラインではないだろう...あなたではないでしょう;）

Answer 3

あなたはすることができますdivのようなコンテナコントロール内にその内容をラップしない限り、テーブルセルの幅（td）を制御しません。次のjQuery関数はdiv内の各tdの内容をラップします。

function WrapTableCellsWithDiv(tableId) 
{ 
    $('#' + tableId + ' tbody tr td').each(function() 
    { 
     //get corresponding th of this td 
     var tdIndex = $(this).index(); 
     var th = $('#' + tableId + ' thead tr th:nth-child(' + (tdIndex + 1) + ')'); 
     var thWidth = $(th).width(); 

     //wrap the contents of td inside a div 
     var tdContents = $(this).html(); 
     var divTag = '<div style="width: ' + thWidth + '">' + tdContents + '</div>'; 
     $(this).html(divTag); 
    }); 
} 

この関数はdivタグ内の各td要素の内容をラップします。 divタグの幅は、対応するth要素の幅に設定されます。

サンプルテーブルの構造：

<table id="SampleTable"> 
    <thead> 
     <tr> 
      <th style="width: 90px;">FirstName</th> 
      <th style="width: 90px;">LastName</th> 
      <th style="width: 60px;">Age</th> 
      <th style="width: 70px;">Gender</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>John</td> 
      <td>Smith</td> 
      <td>25</td> 
      <td>Male</td> 
     </tr> 
     <tr> 
      <td>Ted</td> 
      <td>Eddie</td> 
      <td>22</td> 
      <td>Male</td> 
     </tr> 
     <tr> 
      <td>Angel</td> 
      <td>Mike</td> 
      <td>23</td> 
      <td>Female</td> 
     </tr> 
    </tbody> 
</table> 

Answer 4

ませんジャバスクリプト、ちょうどCSS。正常に動作します！

.no-break-out { 
     /* These are technically the same, but use both */ 
     overflow-wrap: break-word; 
     word-wrap: break-word; 

     -ms-word-break: break-all; 
     /* This is the dangerous one in WebKit, as it breaks things wherever */ 
     word-break: break-all; 
     /* Instead use this non-standard one: */ 
     word-break: break-word; 

     /* Adds a hyphen where the word breaks, if supported (No Blink) */ 
     -ms-hyphens: auto; 
     -moz-hyphens: auto; 
     -webkit-hyphens: auto; 
     hyphens: auto; 

    } 

Answer 5

上記の答えはちょうどCSSあるように、これは、有用である可能性：

td { 
    word-wrap: break-word; 
}