Przewijanie poziome na przepełnieniu stołu

Mam podstawową tabelę w kontenerze. Tabela będzie miała około 25 kolumn. Próbuję dodać poziomy pasek przewijania na przepełnienie tabeli i mam naprawdę trudny czas.

To, co dzieje się teraz, to komórki tabeli dostosowują zawartość komórek, automatycznie dostosowując wysokość komórki i utrzymując stałą szerokość tabeli.

Doceniam wszelkie sugestie, Dlaczego moja metoda nie działa, jak to naprawić.

Wielkie dzięki w naprzód!

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 fiddle (Uwaga: jeśli to możliwe, chciałbym, aby poziomy pasek przewijania był w kontenerze z czerwoną obwódką): http://jsfiddle.net/ZXnqM/3/

Author: AnchovyLegend, 2013-11-05
Source

4 answers

Myślę, że Twój przelew powinien być na zewnętrznym pojemniku. Można również jawnie ustawić minimalną szerokość dla kolumn. Tak: 

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

Http://jsfiddle.net/5WsEt/

 86
Author: mayabelle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-05 16:50:48

O ile nie źle zrozumiałem twoje pytanie, przenieś overflow-x:scroll z .search-table na .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;   }

Z tego co wiem, nie można dawać scrollbarów do samych tabel.

 6
Author: TreeTree,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-05 16:49:15 
   .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;}

Powinieneś podać scroll w div.

 0
Author: surbhi bakshi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-13 08:57:48

Na responsywnej stronie dla telefonów komórkowych całość musi być umieszczona absolutnie na względnym div. I stała wysokość. Media Query set for relevance.

@media only screen and (max-width: 480px){
  .scroll-wrapper{
    position:absolute;
    overflow-x:scroll;
  }
 -1
Author: user2323922,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-24 14:02:29