it-swarm.com.de

Horizontales Scrollen bei Überlauf der Tabelle

Ich habe eine Basistabelle in einem Container. Die Tabelle wird ungefähr 25 Spalten haben. Ich versuche, beim Überlauf des Tisches eine horizontale Bildlaufleiste hinzuzufügen, und es fällt mir sehr schwer. 

Was jetzt passiert, ist, dass die Tabellenzellen den Zellinhalt aufnehmen, indem sie automatisch die Höhe der Zelle anpassen und eine feste Tabellenbreite beibehalten.

Ich freue mich über Vorschläge, warum meine Methode nicht daran arbeitet, wie das Problem behoben werden kann.

Vielen Dank im Voraus!

CSS

.search-table-outter {margin-bottom:30px; }
.search-table{table-layout: fixed; margin:40px auto 0px auto;  overflow-x:scroll; }
.search-table, td, th{border-collapse:collapse; border:1px solid #777;}
th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
td{padding:5px 10px; height:35px;}
tr:nth-child(even)  {background: #f5f5f5;}
tr:nth-child(odd)   {background: #FFF;}

HTML

<div class="search-table-outter wrapper">
    <table class="search-table inner">
        <tr>
            <th>Col1</th>
            <th>col2</th>
            <th>col3</th>
            <th>col4</th>
            <th>col5</th>
            <th>col5</th>
        </tr>
        <?php echo $rows; ?>
    </table>
</div>

JS Geige (Hinweis: Wenn möglich, möchte ich, dass sich die horizontale Bildlaufleiste im Container mit dem roten Rand befindet): http://jsfiddle.net/ZXnqM/3/

48
AnchovyLegend

Ich denke, Ihr Überlauf sollte sich am äußeren Behälter befinden. Sie können auch eine Mindestbreite für die Spalten festlegen. So was:

.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }

Geige: http://jsfiddle.net/5WsEt/

91
mayabelle

Wenn ich Ihre Frage nicht missverstanden habe, verschieben Sie overflow-x:scroll von .search-table in .search-table-outter.

http://jsfiddle.net/ZXnqM/4/

.search-table-outter {border:2px solid red; overflow-x:scroll;}
.search-table{table-layout: fixed; margin:40px auto 0px auto;   }

Soweit ich weiß, können Sie den Tabellen selbst keine Bildlaufleisten geben.

6
TreeTree
   .search-table-outter {border:2px solid red; overflow-x:scroll;}
   .search-table{table-layout: fixed; margin:40px auto 0px auto;   }
   .search-table, td, th{border-collapse:collapse; border:1px solid #777;}
   th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
   td{padding:5px 10px; height:35px;}

Sie sollten Bildlauf in div bereitstellen.

0
surbhi bakshi

Eine Lösung, die niemand erwähnt hat, ist white-space: nowrap für die Tabelle und dem Wrapper overflow-x hinzuzufügen. 

( http://jsfiddle.net/xc7jLuyx/11/

CSS

.wrapper { overflow-x: auto; }
.wrapper table { white-space: nowrap }

HTML

<div class="wrapper">
    <table></table>
</div>

Dies ist ein ideales Szenario, wenn Sie keine Zeilen mit mehreren Zeilen erstellen. Zum Hinzufügen von Zeilen müssen Sie <br/> verwenden.

0
The.Bear