CODEWITHSUNDEEP
htmlcss
wharfdale
wharfdale

Reputation: 752

HTML table td not full width when using display block and 100% width attributes

I am using DISPLAY:BLOCK where appropriate on the td cells with class of column, however the logo and CALL US td cells are not stacking vertically when resized to mobile size.

It's adding 100% width to them however that's not actually taking up 100% of the screen when on mobile size.

JSFIDDLE: http://jsfiddle.net/7bm95wrm/

HTML

<body>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td bgcolor="#FFFFFF" align="center">
            <table width="650px" cellspacing="0" cellpadding="3" class="container">
                <tr>
                    <td class="alignright greytext" style="font-size: 12px;">Having problems reading this email. Don't panic! <a href="#" class="bold">Click here</a> an you can read it in a browser.</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td class="navbar navbar-inverse" align="center">
            <!-- This setup makes the nav background stretch the whole width of the screen. -->
            <table width="650px" cellspacing="0" cellpadding="3" class="container">
                <tr class="navbarbg navbar-inverse">
                    <td class="column"><img src="images/logo.jpg" alt="" title="" width="216" height="54" /></td>
                    <td colspan="2">
                        <table class="whitetext" width="400">
                          <tr>
                            <td class="smalltext alignright" valign="bottom">
                                Call: 0161 482 7650<br />
                                <h2 class="lucidafont">More from Leasing</h2>
                            </td>
                          </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td bgcolor="#FFFFFF" align="center">
            <table width="650px" cellspacing="0" cellpadding="3" class="container toppadding">
                <tr>
                    <td>
                        <h1 class="bluetext">Thank you for downloading<br /> the Leasing Landscape</h1>
                    </td>
                </tr>
                <tr>
                    <td class="greytext bodytext">
                        <h2 class="bluetext">Dear [name],</h2>
                        <p>Thank you for downloading the Leasing Landscape - we're sure you'll find it useful.</p>
                        <p>To view your copy of the guide, please click here: <a href="#" alt="" title="">[link]</a></p>
                        <p>Regards,</p>
                        <h2 class="bluetext">The team at CH&amp;L</h2>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td bgcolor="#FFFFFF" align="center">
            <table width="650px" cellspacing="0" cellpadding="3" class="container">
                <tr>
                    <td colspan="5">
                        <hr>
                    </td>
                </tr>
                <tr>
                    <td colspan="5" style="text-align:center;">
                        <a href="#" alt="" title=""><img src="images/twitter.jpg" alt="" title="" /></a>
                        <a href="#" alt="" title=""><img src="images/facebook.jpg" alt="" title="" /></a>
                        <a href="#" alt="" title=""><img src="images/googleplus.jpg" alt="" title="" /></a>
                        <a href="#" alt="" title=""><img src="images/linkedin.jpg" alt="" title="" /></a>
                    </td>
                </tr>
                <tr style="text-align:center;">
                    <td colspan="6" style="font-size: 12px;" class="greytext">
                        <p>Copyright &copy; 2000-2015 Really Good Domains Ltd. All rights reserved.</p>
                    </td>
                </tr>
                <tr style="text-align:center; font-size: 12px;" class="copyright">
                    <td class="bold column"><a href="#" alt="" title="">Terms &amp; Conditions</a></td>
                    <td class="bold"><a href="#" alt="" title="">Privacy</a></td>
                    <td class="bold"><a href="#" alt="" title="">Cookies</a></td>
                    <td class="bold"><a href="#" alt="" title="">Accessibility</a></td>
                    <td class="bold"><a href="#" alt="" title="">Sitemap</a></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS

body { font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif; }
    td {  }
    .alignright { text-align: right; }
    .navbarbg { background-color: #283791; color: #ffffff; height: 75px; }
    hr {  }
    h1,h2,h3,h4,h5,h6 { font-family: Arial Bold,Gadget,sans-serif; margin: 0; }
    a { color: #283790; }
    .whitetext { color: #ffffff; }
    .bluetext { color: #283790; }
    .greytext { color: #9f9f9f; }
    .smalltext { font-size: 14px; }
    .bodytext { font-size: 13px; padding-top: 20px; }
    .lucidafont { font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif; }
    .toppadding { padding-top: 20px; padding-bottom: 10px; }
    .bold { font-weight: bold; }
    /* .copyright td { border-right: 1px solid #000; height: 5px; }
    .copyright td:last-child { border-right: none; } */
    @media screen and (max-width:480px) {
        table {
            width: 100%!important;
        }
    }
    @media only screen and (max-width: 480px) {
        table[class="body_table"] {
            width: 440px!important;
        }

        table td[class="column"] {
            width:100%!important;
            display: block!important;
        }
    }

Upvotes: 1

Views: 6850

Answers (2)

Ajith S
Ajith S

Reputation: 51

You are using display: block for one td only, I think you need to apply the same to its sibling td too 

 <tr class="navbarbg navbar-inverse">
      <td class="column"><img src="images/logo.jpg" alt="" title="" width="216" height="54" /></td>
                <td colspan="2" class="column">
                    <table class="whitetext" width="400">
                      <tr>
                        <td class="smalltext alignright" valign="bottom">
                            Call: 0161 482 7650<br />
                            <h2 class="lucidafont">More from Leasing</h2>
                        </td>
                      </tr>
                    </table>
                </td>
            </tr>

see this updated fiddle http://jsfiddle.net/ajiths4u/7bm95wrm/1/

Upvotes: 0

NoobEditor
NoobEditor

Reputation: 15881

1st thing is that you need to make the html and body 100% so that it takes the whole browser / view-port width

then, the child element on setting 100% will take parents width, which is html / body in this case

Problem in your markup is that you set width=100% for table, so table tries to take 100% of its parent(html/body in your case), and, they are only as wide as content on the page, so whole width is not occupied.

Update your markup as below :

html,body {
    font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;
    width:100%;
    margin:0;
    padding:0;
}
table{
    width:100%;
}

On a general note, take this below markup and understand the comment

<div class="div_1">div 1
    <div class="div_2">div 2</div>
</div>
<div class="div_3">div 3</div>

CSS

.div_1 {
    width:100%; /*of HTML/Body if width is set, else content width*/
    border:1px solid red;
}
.div_2 {
    width:50%; /*50% of div_1 width*/
    border:1px solid green;
}
.div_3 {
    width:70%; /*50% of HTML / Body width - notice markup*/
    border:1px solid blue;
}

Upvotes: 2

Related Questions