CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
shurup
shurup

Reputation: 871

How do I make an HTML table fit inside a provided space?

I have an HTML table centered in a Bootstrap column, but when the screen size gets too small, it is cut off even though there is space available to the left of it. In addition, there seems to be some extra space between individual cells. cellspacing="0" did not work.

Using media queries in my code, I reduce the size of the table as the screen gets smaller(along with the font). Example: 

  @media (max-width: 560px) {
      body {
        font-size: 20px;
      }
      table {
        width: 280px!important;
        font-size: 18px;
      }
    }

Even though I use margin: auto for the table, it does not seem like the table is centered when the screen is small.

Here is my HTML page, where you can see the table(if you decrease the window size, you'll see when the table crosses the column borders). Is my font/width too big to fit into the space or is it possible to fit it in by centering it and removing some cell spacing?

Upvotes: 1

Views: 722

Answers (1)

Rahul Dogra
Rahul Dogra

Reputation: 76

Have you tried to add width:100%?

Upvotes: 2

Related Questions