When applying the `display:block` and `width:100%` attributes to an HTML table cell, it may

My issue lies in the usage of DISPLAY:BLOCK for the td cells with a class of column. Despite applying it appropriately, the logo and CALL US td cells do not stack vertically when resized to mobile size.

While they are supposed to take up 100% width, they do not actually span the entire screen on mobile devices.

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;
        }
    }
htmlcss

Answer №1

The first step is to ensure that the html and body elements are set to 100% width, so they fill the entire browser or view-port.

Next, any child element with a width set to 100% will inherit the width of its parent, which in this case is the html / body.

The issue in your code is that you have set the width=100% for the table, causing it to try to take up 100% of its parent's width (html/body in your case), but since the parent elements are only as wide as the content on the page, the full width is not utilized.

To address this problem, update your code as follows:

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

As a general tip, consider the following markup and pay attention to the comments:

<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;
}

Answer №2

It appears that you have applied display: block to only one td, but it may be necessary to also apply it to the sibling td.

 <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>

You can view an updated version of this in the following fiddle link: http://jsfiddle.net/ajiths4u/7bm95wrm/1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Lining Up Radio Buttons Horizontally Using CSS: Alignment Issues in Mozilla and Chrome

I have recently started learning CSS and am facing an issue with the alignment of radio buttons. They do not align properly in Chrome and Firefox, although they display correctly in Explorer. Any assistance on this matter would be greatly appreciated. Th ...

javascripthtmlcss

Trouble with Displaying Table Outside of Div in Internet Explorer

As a UI developer, I encountered an issue where the table inside two divs is not displaying correctly in IE8. It works seamlessly in Firefox, but IE is causing me headache. If anyone has any suggestions or advice on how to fix this, please help me out. Yo ...

htmlcssinternet-explorerhtml-table

Necessary CSS selector input equivalent in Reactive Forms

Is there a similar CSS method like input:required {CSS} to style all the reactive form fields in Angular that are set as required using Validators.required in their formControl? Or is there another approach to achieve this with CSS? ...

angularcssangular-reactive-forms

Exploring the Scope of LocalStorage in Javascript

I've recently begun working with local storage and encountered some scope issues. Whenever I try to console.log(test), the second if statement returns undefined. What am I missing here? This is my current code; $("document").ready(function(){ ...

javascripthtmlscopelocal-storage

Issue with displaying jqplot in a jQuery page

Currently, I'm utilizing jqmobile pages for switching between various pages in an html5 application. One of these pages features a jqplot chart. Below is the code snippet: <div data-role="page" id="page-two" data-title="Page 2"> &l ...

javascripthtmlcordovajqplot

What are the steps to retrieve JSON data and display it using an unordered list in an HTML document?

My JSON data structure looks like this: { "fID": "00202020243123", "name": "John Doe", "List": ["Father", "Brother", "Cousin"] } When I render this JSON element in my model and view it in the HTML, everything works fine. However, when I try t ...

javascriptjqueryhtmljsonhtml-lists

Customize the color of arrows within an ng-bootstrap carousel

I am currently working on a carousel using ng-bootstrap, and I need to change the color or image of the arrows from white to black because my background images are white and not visible. The issue is that I am having trouble accessing span, and I am unsure ...

htmlsassbootstrap-4

What is the method for presenting text based on the chosen Select Option?

I attempted to achieve this using hrefs and ids, but it did not meet my requirements. This is the desired format: div.selectcountry { margin-bottom: 10px; font-family: arial; font-size: 12px; } div.countrydepartment { font-family: ...

javascriptjqueryhtmlcss

Sass error: Unable to locate the stylesheet for import while trying to import bootstrap

I am currently working on integrating bootstrap into my project directory using npm. Below is an overview of my file structure: https://i.sstatic.net/HjExY.png Within my style.scss file, I am utilizing the @import feature to include Bootstrap as follows: ...

cssimportsassbootstrap-5

What are the steps to adjust image size using CSS in an email signature?

Having trouble with my email signature. It appears fine on my end, but when the recipient replies, the images are oversized and the css is not rendering correctly in their response. I'm puzzled as to why this is happening. Here's the code snippe ...

htmlcssemail

Is it possible to add padding to an HTML element without affecting its overall dimensions?

Is it possible to apply padding to a div without increasing its size? <div id="someDiv"> someContent </div> #someDiv{ padding: 1em; } One potential solution is to add another nested div within #someDiv and apply margin to that, rathe ...

htmlcss

Interact with elements using Selenium with dynamic target IDs and AJAX

Currently, I am utilizing selenium for automating various IT administrative tasks. One specific task involves swapping out external drives on a NAS system accessed through an internal webpage. The web interface of the NAS appears to utilize AJAX, which dyn ...

htmlajaxselenium

Center an image vertically and horizontally within a div element inside a container, even if the image sizes and aspect ratio differ, while also including padding

I am looking to vertically align images with varying ratios, where the image may be larger or smaller than the content and also include padding; I have tried different solutions found here, but none seem to cover all my requirements; I specifically need i ...

css

How can I create additional white space at the end of my webpage with CSS grid?

Looking for some help with CSS as a beginner here. I'm facing an issue where my CSS is creating excessive blank space at the bottom of my document, almost 60% of it. Could this be due to incorrect parent parameters or the children elements? This is m ...

htmlcsscss-grid

Issue with Tooltip Position when Scrolling Sidebar is causing display problems

My goal is to create a Sidebar with Tooltip attached to its <li> elements similar to this example: Screenshot - Good Tooltip However, I am facing an issue where the position of the Tooltip breaks when scrolling to the bottom of the sidebar, causing ...

javascripthtmlcss

capturing the selected value from a dropdown menu upon form submission

Take a look at this HTML form: <form id="form1"> <select name="date" class="form-control"> </select> <input type="submit" name="submit" id="submit" value="Save" onclick="SubmitForm('#form1', 'editcustomer_callu ...

html

Dynamic water filling effect with SVG

I'm trying to create a wipe animation that looks like water filling up inside of a drop shape. Currently, it is a square with a wave animation on top of the drop logo. The wave animation works correctly, but I am struggling to contain it within the dr ...

javascriptcssanimationsvgfill

Unveiling the Quirk of Foundation 5: Grid Encounters a Popping

Recently, I encountered an issue with Foundation 5. Whenever I attempt to apply the "position:fixed" property on a "div" element that is part of the Foundation Grid, it causes the div to break out of the grid and align itself with the left edge of the ro ...

csszurb-foundation

Unusual phenomenon in ASP.NET: Adding Debug=true in the web.config file results in CSS modifications

As the question suggests: After including debug=true in my web.config file (without making any other alterations to the code), my page is displayed without a background color. Can anyone shed light on why this might be happening? ...

cssasp.netdebuggingweb-config

Modify the background color of checkboxes without including any text labels

I am looking to customize my checkbox. The common method I usually see for customization is as follows: input[type=checkbox] { display: none; } .my_label { display: inline-block; cursor: pointer; font-size: 13px; margin-right: 15px; ...

javascriptjqueryhtmlcsscheckbox