CODEWITHSUNDEEP
html
Brittany
Brittany

Reputation: 1449

Table cut off on mobile device?

I have a table (below code) on a web page, and for some reason when I navigate to this page on a mobile device, the right hand side of the table seems to be cut off? How can I fix this?

<head>

<meta name="viewport" content="width=1000">

</head>

    <center>

        <table style="width:80%;"><tr>
         <td> 
          <?php print render($page['content']); ?> 
            </td>

            <td valign="top" style="padding-left:2%;  font-size:18px;">

                  <?php print render($page['highlighted']); ?> 

            </td>


            </tr></table>

        </center>

Upvotes: 2

Views: 5299

Answers (2)

Nicholas Fernandes
Nicholas Fernandes

Reputation: 11

You can always use media queries.

Unfortunately they don't work for inline css, so you'll need to give the table a class and have a css file.

With media queries you can set specific css rules for different sizes.

So this

@media screen and (max-width: 800px) { .tableclass { width: ; } }

Will set it up so if the screen size is less than 800 pixels the table will use that different width.

Always make sure the media queries are at the bottom of the css file. You can set multiple ones at once.

Upvotes: 1

Web Dev Guy
Web Dev Guy

Reputation: 1789

this is because it is difficult to work with tables on mobile devices, and should be avoided if possible. You could look at setting the width of the table at 100% and having the overflow set to scroll. This is how bootstrap make their tables responsive 

<table style="width:80%; overflow: scroll;">

Upvotes: 1

Related Questions