wake-up-neo.net

bootstrap-abhängiger Tabelleninhalt

Ich habe ähnliches 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>

Wenn ich mir die Ausgabe in einem kleinen Ansichtsfenster ansehe, wird die Größe der Tabelle korrekt geändert, der Absatzinhalt in den Tabellenzellen wird jedoch nicht umbrochen, sodass Bildlaufleisten angezeigt werden. Ich habe erwartet, dass das responsive Verhalten den Absatzinhalt umbrochen hätte. Wie kann ich das erreichen? 

24
prmph

Ich bin auf das gleiche Problem gestoßen wie du, aber die obigen Antworten haben mein Problem nicht gelöst. Die einzige Möglichkeit, das Problem zu lösen, bestand darin, eine Klasse zu erstellen und bestimmte Breiten zu verwenden, um die Umwicklung für meinen speziellen Anwendungsfall auszulösen. Als Beispiel habe ich unten ein Snippet bereitgestellt - aber ich habe festgestellt, dass Sie es für die betreffende Tabelle anpassen müssen - da ich normalerweise mehrere Colspans verwende, abhängig vom Layout. Der Grund, warum ich glaube, dass Bootstrap fehlschlägt - liegt daran, dass es die Wrapping-Einschränkungen aufhebt, um eine vollständige Tabelle für die Bildlaufleisten zu erhalten. Der Colspan muss es stolpern.

<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+ */
    }
}

Ich hoffe das hilft

15
Dave Friedel

verwenden Sie einfach wie unten und es wird Word langen Text innerhalb einer Tabelle umschließen. Keine Notwendigkeit zu etwas anderem

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

Das Verhalten ist absichtlich:

Erstellen Sie responsive Tabellen, indem Sie eine beliebige .table in .table-responsive einschließen, um sie auf kleinen Geräten horizontal zu scrollen (unter 768px). Wenn Sie etwas größer als 768px betrachten, werden Sie in diesen Tabellen keinen Unterschied sehen.

Dies bedeutet, dass Tabellen standardmäßig reagieren (ihre Größe anpassen). Aber nur, wenn Sie die Zeilen Ihrer Tabelle nicht brechen und eine Bildlaufleiste hinzufügen möchten, wenn nicht genügend Platz vorhanden ist, verwenden Sie die Klasse .table-responsive.

Wenn Sie einen Blick auf die Quelle von bootstrap werfen, werden Sie feststellen, dass eine Medienabfrage nur bei der Bildschirmgröße XS aktiviert wird und der Text der Tabelle auf white-space: nowrap gesetzt wird, wodurch der Text nicht beschädigt wird.

TL; DR; Lösung

Entfernen Sie einfach .table-responsive Element/Klasse aus Ihrem HTML-Code.

15
Buksy

Sie können also Folgendes verwenden:

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

Wenn das nicht klappt:

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

EDIT

Ich denke, der Grund, aus dem Ihre Tabelle nicht anspricht, war, dass Sie nicht in .container-, .row- und .col-md-x-Klassen wie diesem umgebrochen wurden

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

Damit können Sie noch <p>-Tags verwenden und sogar darauf reagieren lassen.

Bitte sehen Sie das Bootply-Beispiel hier

9
lozadaOmr

Fein dann. Sie können die CSS-Zeilenumbruch-Eigenschaft verwenden. Etwas wie das :

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

Die UberNeo-Antwort lautet Ok und ich mag sie, weil Sie außer dem TD nichts anderes ändern müssen. Der einzige Punkt ist, dass Sie dem Stil auch "Weißraum: Normal" hinzufügen müssen, um die ansprechenden Eigenschaften der Tabelle beizubehalten. Wenn nicht, wird bei bestimmten Auflösungen der Umbruch nicht durchgeführt und der Bildlauf der Tabelle nicht erscheinen.

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>

2
Keith Chiah

Fügen Sie Ihre neue Klasse "Tabellen" mit der auf Tabellen reagierenden Klasse hinzu und fügen Sie anschließend den Code in Ihre js-Datei ein

$(".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