1

多くのスペースを占める複数の列に長い単一の単語または複数の中サイズの単語があるテーブルで小さな問題が発生しています。http://clのような結果が得られます。ly/8cb66d08b6b9755ce858 各行に自然な成長が必要な場合でも、行には幅のパーセントが設定されています。同様に、line-wrapper はそれを壊さず、display:none はテーブルが自然に成長するため、実際には停止しません。私が望むのは、テーブルが親セットの幅 (パディングのある青いセクション) にとどまることです。同様に、ヘッダーは、変更できないスタイリング用のテーブルの周りの div です。

<div class="table-wrapper group">
  <table class="tabular sortable" id="campaign_table" style="table-layout:fixed; word-wrap: break-word; ">
    <thead>
      <tr>
        <td class="sorttable_nosort" style="border-right-width: 1px; border-right-style: solid; border-right-color: rgb(255, 255, 255); ">
          <input type="checkbox" id="check_all_2" name="check_all_2" title="Select All" onclick="selectAllTable(document.wizard_form, check_all_2); checkIsSelected([ 'by_date', 'display_hidden', 'check_all_2']);">
        </td>
        <td width="37%" style="border-right-width: 1px; border-right-style: solid; border-right-color: rgb(255, 255, 255); ">List/Campaign</td>
        <td width="43%" style="border-right-width: 1px; border-right-style: solid; border-right-color: rgb(255, 255, 255); ">Template &amp; Segmentation</td>
        <td width="17%" style="min-width: 140px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(255, 255, 255); ">Date Sent</td>
        <td width="4%">Sent</td>
      </tr>   
    </thead>

    <tbody class="campaign-table">
      <input type="hidden" id="campaignNum" name="campaignNum" value="1">
      <tr class="evenRow">
        <td>
          <label>
            <input type="checkbox" id="select_981" name="select_981" onclick="checkIsSelected(['by_date', 'display_hidden']);">  
          </label>
        </td>
        <td>0ThisIsAReallyLongNameThatHasNoSpacesHopefullyMaxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        <td>ThisIsAReallyLongNameThatHasNoSpacesHopefullyMax <br>  (BiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiggggggggggggggggggggggggggggggggggggggggText)</td>
        <td>11/08/10 4:28 PM</td>
        <td>0</td>
      </tr>
    </tbody>
    <tfoot></tfoot>
  </table> 
</div>

ほとんどのクラスとスタイルは、何らかの JavaScript ファイルから生成されていることに注意してください。jQuery の 1.8 で動作するプラグインを知っている場合 (動作するプラグインをいくつか見ましたが、1.3 が必要です)。テーブル内のデータのためにテーブルの列幅が設定されており、そのデータを変更しても列の幅が自動的に変更されないため、手動で変更する必要があるかどうか疑問に思っています。

4

1 に答える 1

3

問題の一部は、Word-wrap の CSS プロパティをテーブルに割り当てたが、データを含む実際のセルには割り当てていない可能性があります。実際の要素にword-wrap: break-word;プロパティを設定するスタイルまたはクラスを割り当てることができるかどうかを確認してください。<td>

注目すべきもう 1 つの考慮事項は、&shy;ソフト ハイフンの使用です。テキストがページにレンダリングされる前にサーバー側で、または JavaScript を使用してブラウザーで、このソフト ハイフン文字をテキストに挿入できる場合、ブラウザーはその時点で単語を分割することを認識します。

最後に、テーブルの先頭に<colgroup>and<col>要素を適用すると、テーブル構造がクリーンアップされ、列幅がより明確に定義されるようになるかどうかを確認します。この最後のポイントは、テキストの折り返しやハイフネーションには実際にはあまり影響しないかもしれませんが、表のレイアウトには役立つかもしれません。

于 2010-11-10T22:31:06.503 に答える