Div with horizontal scrolling only

Question

I have a fixed width DIV containing a table with many columns  and need to allow the user to scroll the table horizontally within the DIV   This needs to work on IE6 and IE7 only  internal client application    The following works in IE7   overflow-x  scroll    Can anyone help with a solution that works in IE6 as well

User · Accepted Answer

The solution is fairly straight forward  To ensure that we don t impact the width of the cells in the table  we ll turn off white-space  To ensure we get a horizontal scroll bar  we ll turn on overflow-x  And that s pretty much it    container       width  30em      overflow-x  auto      white-space  nowrap      You can see the end-result here  or in the animation below  If the table determines the height of your container  you should not need to explicitly set overflow-y to hidden  But understand that is also an option

User · Answer

try this   HTML    lt div class  container  gt     lt div class  item  gt 1 lt  div gt     lt div class  item  gt 2 lt  div gt     lt div class  item  gt 3 lt  div gt     lt div class  item  gt 4 lt  div gt     lt div class  item  gt 5 lt  div gt   lt  div gt    CSS    container     width  200px    height  100px    display  flex    overflow-x  auto      item     width  100px    flex-shrink  0    height  100px      The white-space  nowrap  property dont let you wrap text  Just see here for an example  https   codepen io oezkany pen YoVgYK

User · Answer

For horizontal scroll  keep these two properties in mind   overflow-x scroll  white-space  nowrap    See working link   click me  HTML   lt p gt overflow scroll lt  p gt   lt div class  scroll  gt You can use the overflow property when you want to have better   control of the layout  The default value is visible You can use the overflow property when you want     to have better control of the layout  The default value is visible  lt  div gt    CSS  div scroll   background-color  00FFFF  height 40px  overflow-x scroll  white-space  nowrap

User · Answer

overflow-x  scroll  overflow-y  hidden    EDIT   It works for me    lt div style  overflow-x scroll overflow-y hidden width 250px height 200px  gt       lt div style  width 400px height 250px  gt  lt  div gt   lt  div gt

User · Answer

overflow-x  scroll  overflow-y  hidden    EDIT   It works for me    lt div style  overflow-x scroll overflow-y hidden width 250px height 200px  gt       lt div style  width 400px height 250px  gt  lt  div gt   lt  div gt

User · Answer

I couldn t get the selected answer to work but after a bit of research  I found that the horizontal scrolling div must have white-space  nowrap in the css    Here s complete working code    lt  doctype html gt   lt html lang  en  gt   lt head gt       lt meta charset  utf-8  gt       lt title gt Something lt  title gt       lt style type  text css  gt           scrolly              width  1000px              height  190px              overflow  auto              overflow-y  hidden              margin  0 auto              white-space  nowrap                    img              width  300px              height  150px              margin  20px 10px              display  inline                 lt  style gt   lt  head gt   lt body gt       lt div id  scrolly  gt           lt img src  img car jpg  gt  lt  img gt           lt img src  img car jpg  gt  lt  img gt           lt img src  img car jpg  gt  lt  img gt           lt img src  img car jpg  gt  lt  img gt           lt img src  img car jpg  gt  lt  img gt           lt img src  img car jpg  gt  lt  img gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

overflow-x  scroll  overflow-y  hidden    EDIT   It works for me    lt div style  overflow-x scroll overflow-y hidden width 250px height 200px  gt       lt div style  width 400px height 250px  gt  lt  div gt   lt  div gt

User · Answer

overflow-x  scroll  overflow-y  hidden    EDIT   It works for me    lt div style  overflow-x scroll overflow-y hidden width 250px height 200px  gt       lt div style  width 400px height 250px  gt  lt  div gt   lt  div gt

User · Answer

For horizontal scroll  keep these two properties in mind   overflow-x scroll  white-space  nowrap    See working link   click me  HTML   lt p gt overflow scroll lt  p gt   lt div class  scroll  gt You can use the overflow property when you want to have better   control of the layout  The default value is visible You can use the overflow property when you want     to have better control of the layout  The default value is visible  lt  div gt    CSS  div scroll   background-color  00FFFF  height 40px  overflow-x scroll  white-space  nowrap

User · Answer

I couldn t get the selected answer to work but after a bit of research  I found that the horizontal scrolling div must have white-space  nowrap in the css    Here s complete working code    lt  doctype html gt   lt html lang  en  gt   lt head gt       lt meta charset  utf-8  gt       lt title gt Something lt  title gt       lt style type  text css  gt           scrolly              width  1000px              height  190px              overflow  auto              overflow-y  hidden              margin  0 auto              white-space  nowrap                    img              width  300px              height  150px              margin  20px 10px              display  inline                 lt  style gt   lt  head gt   lt body gt       lt div id  scrolly  gt           lt img src  img car jpg  gt  lt  img gt           lt img src  img car jpg  gt  lt  img gt           lt img src  img car jpg  gt  lt  img gt           lt img src  img car jpg  gt  lt  img gt           lt img src  img car jpg  gt  lt  img gt           lt img src  img car jpg  gt  lt  img gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

try this   HTML    lt div class  container  gt     lt div class  item  gt 1 lt  div gt     lt div class  item  gt 2 lt  div gt     lt div class  item  gt 3 lt  div gt     lt div class  item  gt 4 lt  div gt     lt div class  item  gt 5 lt  div gt   lt  div gt    CSS    container     width  200px    height  100px    display  flex    overflow-x  auto      item     width  100px    flex-shrink  0    height  100px      The white-space  nowrap  property dont let you wrap text  Just see here for an example  https   codepen io oezkany pen YoVgYK

[html] Div with horizontal scrolling only

Examples related to html

Examples related to css