How can I make a CSS table fit the screen width

Question

Currently the table is too wide and causes the browser to add a horizontal scroll bar

User · Answer

Instead of using the   unit     the width height of another element     you should use vh and vw  Your code would be  your table     width  100vw    height  100vh     But  if the document is smaller than 100vh or 100vw  then you need to set the size to the document s size   table  style width   window innerWidth   table  style height   window innerHeight

User · Answer

Set font-size in viewport-width-related units  e g    table   font-size  0 9vw     This will make font unreadable when page is too narrow  but sometimes this is acceptable

User · Answer

table   width  100       Will not produce the exact result you are expecting  because of all the margins and paddings used in body  So IF scripts are OKAY  then use Jquery       tableid   width   window  width       If not  use this snippet   lt style gt      body   margin 0 padding 0     lt  style gt   lt table width  100   border  1  gt       lt tr gt           lt td gt Just a Test          lt  td gt       lt  tr gt   lt  table gt    You will notice that the width is perfectly covering the page   The main thing is too nullify the margin and padding as I have shown at the body  then you are set

User · Answer

CSS   table        table-layout fixed      Update with CSS from the comments    td        overflow  hidden       text-overflow  ellipsis       word-wrap  break-word      For mobile phones I leave the table width but assign an additional CSS class to the table to enable horizontal scrolling  table will not go over the mobile screen anymore      media only screen and  max-width  480px           horizontal scrollbar for tables if mobile screen         tablemobile           overflow-x  auto          display  block            Sufficient enough

User · Answer

If the table content is too wide  as in this example   there s nothing you can do other than alter the content to make it possible for the browser to show it in a more narrow format  Contrary to the earlier answers  setting width to 100  will have absolutely no effect if the content is too wide  as that link  and this one  demonstrate   Browsers already try to keep tables within the left and right margins if they can  and only resort to a horizontal scrollbar if they can t   Some ways you can alter content to make a table more narrow    Reduce the number of columns  perhaps breaking one megalithic table into multiple independent tables   If you re using CSS white-space  nowrap on any of the content  or the old nowrap attribute   amp nbsp   a nobr element  etc    see if you can live without them so the browser has the option of wrapping that content to keep the width down  If you re using really wide margins  padding  borders  etc   try reducing their size  but I m sure you thought of that     If the table is too wide but you don t see a good reason for it  the content isn t that wide  etc    you ll have to provide more information about how you re styling the table  the surrounding elements  etc  Again  by default the browser will avoid the scrollbar if it can

User · Answer

Put the table in a container element that has    overflow scroll    max-width 95vw   or make the table fit to the screen and overflow scroll all table cells

User · Answer

There is already a good solution to the problem you are having  Everyone has been forgetting the CSS property font-size  the last but not least solution  One can decrease the font size by 2 to 3 pixels  It may still be visible to the user and for somewhat you can decrease the width of the table  This worked for me  My table has 5 columns with 4 showing perfectly  but the fifth column went out of the viewport  To fix the problem  I decreased the font size and all five columns were fitted onto the screen  table th td     font-size  14px     For your information  if your table has too many columns and you are not able to decrease  then make the font size small  It will get rid of the horizontal scroll  There are two advantages  your style for mobile web will remain the same  good without horizontal scroll  and when user sees small sizes  most users will zoom into the table to their comfort level

[html] How can I make a CSS table fit the screen width?

Examples related to html

Examples related to css

Examples related to scrollbar

Examples related to css-tables