Die Titel der Tabelle nicht umwandeln und das Scrollen aktivieren

Question

Ich verwende Datatables, um eine Tabelle zu erstellen (aber ich denke, dass mein Problem eine einfache CSS-Lösung erfordert).

Ich möchte die Titel der Tabelle nicht umbrechen und horizontal scrollen lassen. Ich habe mehrere SO-Posts betrachtet, und festgestellt, dass es mit einer Kombination von white-space: nowrap für den Container der Tabelle und display: inline-block für die Tabelle selbst erreicht werden kann, aber ich konnte nicht arbeiten, obwohl mehrere mögliche Optionen versuchen.

Hier ist meine aktuelle fiddle.

Answer 1

können Sie nur overflow-x:auto; machen und festes Layout wie folgt entfernen:

https://jsfiddle.net/gszd0vty/4/

Ich hoffe, dass Ihnen hilft.

Answer 2

Das Problem ist, dass Sie eine Breite von 100% anwenden. Dies hat zur Folge, dass die Tabelle eine Breite von ... 100% hat. Wenn Sie einen langen Titel haben, wird er aus der Tabelle herauswachsen.

Verwenden Sie stattdessen min-width: 100% oder entfernen Sie einfach das wdith wie in meiner Geige

#example{ 
    width:auto; 
} 

https://jsfiddle.net/gszd0vty/3/

EDIT: beachten Sie, dass Datatable auch Breite ergänzt: 100% standardmäßig. Vielleicht möchten Sie sich den Grund dafür ansehen ... Es ist vielleicht nicht schlau, seinen Stilen zu begegnen.

Answer 3

Es kann mit einfachen CSS erreicht werden. Wickeln Sie Tabelle in einigen <div>, wenden sie overflow: auto und Set für Tisch table-layout: fixed; width: 100%;

$(document).ready(function() { 
 
    $('table').each(function() { 
 
    var cell; 
 
    var tr = $(this).find('tr'); 
 

 
    if ($(this).find('thead').length) { 
 
     cell = 'th'; 
 
    } else { 
 
     cell = 'td'; 
 
    } 
 

 
    for (let i = 0; i < 100; i++) { 
 
     setTimeout(() => tr.append('<'+cell+'>'+cell+'</'+cell+'>'), 0); 
 
    } 
 
    }); 
 
})

table { 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 

 
td, 
 
th { 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid #ddd; 
 
    table-layout: fixed; 
 
} 
 

 
table th { 
 
    background-color: #fafafa; 
 
} 
 

 
.table-wrapper { 
 
    overflow: auto; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="table-wrapper"> 
 
    <table class="header"> 
 
    <thead> 
 
     <tr> 
 
     </tr> 
 
    </thead> 
 
    </table> 
 
</div> 
 

 
<div class="table-wrapper"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>