Search code examples
htmlcsswidthcss-tables

How to limit HTML table width to 95% of the screen width?


How to limit HTML table width to 95% of the screen width?

I'm using

<style type="text/css">
table {
  max-width:95%;
  border-collapse:collapse;
  ...
}
...

but the resultant HTML page has the table wider than the screen width (a 1440x900 screen) and a scroll bar appear at the bottom of page.


Solution

  • Use the style

    width: 95%;
    

    instead. Also, depending on what your intention may be, consider the style

    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
    

    for better layout. I'm only guessing here but it seems like a good idea to make the distance between the table and the window edge a fix one. Otherwise the margin will be dynamically changed when you resize.