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

2009-08-06 html css

返されたデータセットからのコンテンツで構築されたテーブルがあります。私がしたいことは、コンテンツの長さ(その文字列)に関係なく、「説明」セルが280px幅を超えて拡大しないようにすることです。私が試してみました:

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

しかし、これはうまくいかないようです。折り返さないでください。また、280pxを超えるものも表示したくありません。

Answers

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

もちろん、インラインではなく、別個のリンクされたスタイルシートにこれを配置します...;)

divようなコンテナーコントロール内にコンテンツをラップしない限り、テーブルセル( td )の幅を制御できません。次のjQuery関数は、各tdのコンテンツをdiv内にラップします。

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);
    });
}

この関数は、各td要素のコンテンツをdivタグ内にラップします。 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>

JavaScriptはなく、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;

    }

これは便利かもしれません。別の答えのように、それは単なるCSSです。

td {
    word-wrap: break-word;
}

コードに使用するのに十分な相対ロジックがある場合、それは完全に可能です。

ビューポートの単位を使用するだけですが、計算が少し複雑になる場合もあります。これを使用して、リストアイテムがはるかに長いテキストで特定のテーブル列を膨らませるのを防ぎました。

ol {max-width: 10vw; padding: 0; overflow: hidden;}

どうやら、 colgroup要素のmax-width 機能しません。これは、親の何かを制御するために子要素に完全に依存しているのはかなり不十分です。

ここにChris Dutrowのコメントを回答として投稿するには:

style="table-layout:fixed;" 

テーブルのスタイル自体が私にとってうまくいきました。クリス、ありがとう!

完全な例:

<table width="55" height="55" border="0" cellspacing="0" cellpadding="0" style="border-radius:50%; border:0px solid #000000;table-layout:fixed" align="center" bgcolor="#152b47">
  <tbody>
    <td style="color:#ffffff;font-family:TW-Averta-Regular,Averta,Helvetica,Arial;font-size:11px;overflow:hidden;width:55px;text-align:center;valign:top;whitespace:nowrap;">

     Your table content here

    </td>
  </tbody>
</table>

次のように、max-width属性を280pxに設定するだけです。

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

これはあなたの問題を解決します。

Related