CODEWITHSUNDEEP
javascripthtmlcssipad
AdityaKapreShrewsburyBoston
AdityaKapreShrewsburyBoston

Reputation: 1143

HTML table not fitting when html opened on IPAD

I have a very simple html table with a single row as follows :

          <div class="container">
            <table style="width: 100%; " >
            <tr style="vertical-align: top;">
                    <td width="55%" style="border: 1px solid #e0e0e0; "> CONTENT1 </td>            
                    <td width="5%" >  </td>
                    <td width="40%" > CONTENT 2 </td>
           </tr>
           </table>
          <div>

It shows up great when opened on chrome browser. However, when I try opening on IPAD, the contents of the last column get distorted and go out of the container div containing this table. How can this be fixed ?

Upvotes: 0

Views: 924

Answers (1)

M -
M -

Reputation: 28502

I strongly recommend you stop using tables, and start using <div>s.

That being said, your table adds up to exactly 100%, which means that any additional borders will push their width beyond 100%, thus wrapping the last element over to the next line. Try this:

<div class="container">
<table style="width: 100%; border: 0px;" >
<tr style="vertical-align: top; border: 0px;">
        <td width="55%" style="border: 0px;"> CONTENT1 </td>            
        <td width="5%"  style="border: 0px;">  </td>
        <td width="40%" style="border: 0px;"> CONTENT 2 </td>
</tr>
</table>
<div>

Update:

Here is a version using <div>s and a little bit of CSS. I recommend this version because it's more standard:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
    body{margin: 0px;padding:0px;}
    div{
        display: inline-block;
        padding: 0px;
        margin: 0px;
    }
</style>
</head>

<body>
<div class="container" style="width: 100%">
       <div style="width: 55%; background-color: #f90;">Content 1</div><!--
    --><div style="width: 5%; background-color: #9f0;">&nbsp;</div><!--
    --><div style="width: 40%; background-color: #09f;">Content 2</div>
</div>
</body>
</html>

I added comments <!-- --> in between <div>s because otherwise you'll get a white space between each, which will take up more than 100% of your page width.

Upvotes: 1

Related Questions