0

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 ?

AdityaKapreShrewsburyBoston
  • 1,143
  • 2
  • 16
  • 37
  • Tables are trouble indeed. I highly recommend you use divs instead. – ofer dofer Jul 18 '14 at 00:04
  • @BerdiyaOnur thanks, but how can i partition div into 2 parts ? I can use 3 divs, 2 divs inside 3rd, but the 2 divs get displayed one below other and not in same line – AdityaKapreShrewsburyBoston Jul 18 '14 at 00:33
  • The way divs work is quite different from how tables work. To get them in the same line you use float: left as a CSS class. It just takes some getting used to, but you'll be fine with it. – ofer dofer Jul 18 '14 at 01:51

1 Answers1

1

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.

M -
  • 26,908
  • 11
  • 49
  • 81
  • Also, here is a [very good discussion](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) about why you should stop using tables, and start using DIVs instead. – M - Jul 18 '14 at 00:17
  • Thanks @Marco Del Valle , but how can i partition div into 2 parts ? I can use 3 divs, 2 divs inside 3rd, but the 2 divs get displayed one below other and not in same line – AdityaKapreShrewsburyBoston Jul 18 '14 at 00:33
  • I updated my answer to include nested DIVs. You have a 100% width DIV, and three smaller ones nested within that one. You can continue nesting them further if you need to. – M - Jul 18 '14 at 03:19
  • If your user need accessible content maybe are still relevant because there is a lot of issues for a blind person. not sure about that maybe it has evolved since I read some articles about that
     – snoob dogg Oct 25 '22 at 13:03