web-dev-qa-db-ja.com

bootstrapレスポンシブテーブルコンテンツのラッピング

次のようなHTMLがあります。

    <div class="table-responsive">
         <table class="table borderless">
             <caption>
                  <h3>Announcements</h3>
             </caption>
             <tbody>
                 <tr >
                     <td>                                        
                         If you are waiting for your certificate from your trainer, please contact them. Our turnaround time is between 1-2 months from the time we receive your details from your trainer, which we expect to be at the start of your program. The remainder is dependent upon how quickly your trainer has send in all the required paperwork and made payment, etc.                                       
                     </td>
                 </tr>
             </tbody>
         </table>
     </div>

小さなビューポートで出力を表示すると、テーブルのサイズが適切に変更されますが、テーブルセルの段落コンテンツは折り返されないため、スクロールバーが表示されます。レスポンシブな振る舞いは、段落の内容をラップすることだと思っていました。どうすればこれを達成できますか？

twitter-bootstrapresponsive-designtwitter-bootstrap-3html-table
29
prmph

私はあなたと同じ問題に出くわしましたが、上記の答えは私の問題を解決しませんでした。私が解決できた唯一の方法は、クラスを作成し、特定の幅を使用して特定のユースケースのラッピングをトリガーすることでした。例として、以下のスニペットを提供しましたが、レイアウトに応じて複数のコルスパンを通常使用するため、問題のテーブルに合わせて調整する必要があることがわかりました。 Bootstrapが失敗していると思う理由は、スクロールバーの完全なテーブルを取得するためにラッピング制約を削除するためです。 colspanはそれをトリップする必要があります。

<style>
@media (max-width: 768px) { /* use the max to specify at each container level */
    .specifictd {    
        width:360px;  /* adjust to desired wrapping */
        display:table;
        white-space: pre-wrap; /* css-3 */
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        Word-wrap: break-Word; /* Internet Explorer 5.5+ */
    }
}

これが役立つことを願っています

17
Dave Friedel

次のように使用するだけで、Wordはテーブル内の長いテキストをラップします。他に何もする必要はありません

<td style="Word-wrap: break-Word;min-width: 160px;max-width: 160px;">long long comments</td>
29
UberNeo

したがって、次を使用できます。

td {
  white-space: normal !important; // To consider whitespace.
}

これが機能しない場合：

td {
  white-space: normal !important; 
  Word-wrap: break-Word;  
}
table {
  table-layout: fixed;
}
19
user2195058

動作は意図的です：

.table-responsiveに.tableをラップしてレスポンシブテーブルを作成し、小さなデバイス（768px未満）で水平にスクロールするようにします。 768px幅を超えるものを表示する場合、これらのテーブルに違いは見られません。

つまり、テーブルはデフォルトでレスポンシブです（サイズを調整しています）。ただし、十分なスペースがないときにテーブルの行を壊してスクロールバーを追加したくない場合にのみ、.table-responsiveクラスを使用します。

bootstrapのソース を見ると、XS画面サイズでのみアクティブになるメディアクエリがあります。テーブルのテキストをwhite-space: nowrapに設定します。これにより、テーブルが破損しなくなります。

TL; DR;解決

Htmlコードから.table-responsive要素/クラスを削除するだけです。

17
Buksy

編集

テーブルが最初に応答しない理由は、このような.container、.row、および.col-md-xクラスでラップしなかったためだと思います

<div class="container">
   <div class="row">
     <div class="col-md-12">
     <!-- or use any other number .col-md- -->
         <div class="table-responsive">
             <div class="table">
             </div>
         </div>
     </div>
   </div>
</div>

これにより、<p>タグを引き続き使用でき、応答することさえできます。

Bootplyの例を参照してください here

10
lozadaOmr

じゃ、はい。 CSS Wordのwrapプロパティを使用できます。このようなもの ：

td.test /* Give whatever class name you want */
{
width:11em; /* Give whatever width you want */
Word-wrap:break-Word;
}
4
Manish Kumar

UberNeoの応答はOkであり、TD以外を変更する必要がないので気に入っています。唯一のポイントは、テーブルの応答特性を維持するためにスタイルに「white-space：normal」を追加する必要があることです。そうでない場合、特定の解像度でラップは行われず、テーブルのスクロールは行われません現れる。

style="Word-wrap: break-Word;min-width: 160px;max-width: 160px;white-space:normal;"
4
JavocSoft
.table td.abbreviation {
  max-width: 30px;
}
.table td.abbreviation p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: Ellipsis;

}
<table class="table">
<tr>
        <td class="abbreviation"><p>ABC DEF</p></td>
</tr>
</table>
3
Keith Chiah

テーブルレスポンシブクラスを使用して新しいクラス「tableresp」を追加し、jsファイルに以下のコードを追加します

$(".tableresp").on('click', '.dropdown-toggle', function(event) {

    if ($('.dropdown-menu').length) {
        var Elm = $('.dropdown-menu'),
            docHeight = $(document).height(),
            docWidth = $(document).width(),
            btn_offset = $(this).offset(),
            btn_width = $(this).outerWidth(),
            btn_height = $(this).outerHeight(),
            Elm_width = Elm.outerWidth(),
            Elm_height = Elm.outerHeight(),
            table_offset = $(".tableresp").offset(),
            table_width = $(".tableresp").width(),
            table_height = $(".tableresp").height(),

            tableoffright = table_width + table_offset.left,
            tableoffbottom = table_height + table_offset.top,
            rem_tablewidth = docWidth - tableoffright,
            rem_tableheight = docHeight - tableoffbottom,
            Elm_offsetleft = btn_offset.left,
            Elm_offsetright = btn_offset.left + btn_width,
            Elm_offsettop = btn_offset.top + btn_height,
            btn_offsetbottom = Elm_offsettop,

            left_Edge = (Elm_offsetleft - table_offset.left) < Elm_width,
            top_Edge = btn_offset.top < Elm_height,
            right_Edge = (table_width - Elm_offsetleft) < Elm_width,
            bottom_Edge = (tableoffbottom - btn_offsetbottom) < Elm_height;

        console.log(tableoffbottom);
        console.log(btn_offsetbottom);
        console.log(bottom_Edge);
        console.log((tableoffbottom - btn_offsetbottom) + "|| " + Elm_height);


        var table_offset_bottom = docHeight - (table_offset.top + table_height);

        var touchTableBottom = (btn_offset.top + btn_height + (Elm_height * 2)) - table_offset.top;

        var bottomedge = touchTableBottom > table_offset_bottom;

        if (left_Edge) {
            $(this).addClass('left-Edge');
        } else {
            $('.dropdown-menu').removeClass('left-Edge');
        }
        if (bottom_Edge) {
            $(this).parent().addClass('dropup');
        } else {
            $(this).parent().removeClass('dropup');
        }

    }
});
var table_smallheight = $('.tableresp'),
    positioning = table_smallheight.parent();

if (table_smallheight.height() < 320) {
    positioning.addClass('positioning');
    $('.tableresp .dropdown,.tableresp .adropup').css('position', 'static');

} else {
    positioning.removeClass('positioning');
    $('.tableresp .dropdown,.tableresp .dropup').css('position', 'relative');

}
0
Vishal Sharma