Horizontal scroll on overflow of table

Question

I have a basic table in a container  The table will have about 25 columns  I am trying to add a horizontal scroll bar on overflow of the table and am having a really tough time    What is happening now  is the table cells are accommodating the cells contents by automatically adjusting the height of the cell and maintaining a fixed table width   I appreciate any suggestions on why my method is not working on  how to fix this   Many thanks in advance   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   lt div class  search-table-outter wrapper  gt       lt table class  search-table inner  gt           lt tr gt               lt th gt Col1 lt  th gt               lt th gt col2 lt  th gt               lt th gt col3 lt  th gt               lt th gt col4 lt  th gt               lt th gt col5 lt  th gt               lt th gt col5 lt  th gt           lt  tr gt           lt  php echo  rows    gt       lt  table gt   lt  div gt    JS fiddle  Note  if possible  I would like the horizontal scroll bar to be in the container with the red border   http   jsfiddle net ZXnqM 3

User · Answer

A solution that nobody mentioned is use white-space: nowrap for the table and add overflow-x to the wrapper.

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

CSS

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

HTML

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

This is an ideal scenario if you don't want rows with multiple lines.
To add break lines you need to use <br/>.

User · Answer

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     You should provide scroll in div

User · Answer

Unless I grossly misunderstood your question  move overflow-x scroll from  search-table to  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        As far as I know you can t give scrollbars to tables themselves

User · Answer

On a responsive site for mobiles the whole thing has to be positioned absolute on a relative div  And fixed height  Media Query set for relevance    x000D   x000D   media only screen and  max-width  480px   x000D     scroll-wrapper  x000D      position absolute  x000D      overflow-x scroll  x000D      x000D   x000D   x000D

User · Answer

The solution for those who cannot or do not want to wrap the table in a div  e g  if the HTML is generated from Markdown  but still want to have scrollbars    x000D   x000D  table   x000D    display  block  x000D    max-width  -moz-fit-content  x000D    max-width  fit-content  x000D    margin  0 auto  x000D    overflow-x  auto  x000D    white-space  nowrap  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt Especially on mobile  a table can easily become wider than the viewport  lt  td gt  x000D       lt td gt Using the right CSS  you can get scrollbars on the table without wrapping it  lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt A centered table  lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    Explanation  display  block  makes it possible to have scrollbars  By default  and unlike tables   blocks span the full width of the parent element  This can be prevented with max-width  fit-content   which allows you to still horizontally center tables with less content using margin  0 auto   white-space  nowrap  is optional  but useful for this demonstration

User · Answer

I think your overflow should be on the outer container  You can also explicitly set a min width for the columns  Like this    search-table-outter   overflow-x  scroll    th  td   min-width  200px      Fiddle  http   jsfiddle net 5WsEt

[html] Horizontal scroll on overflow of table

Examples related to html

Examples related to css

Examples related to styling

Examples related to usability