CODEWITHSUNDEEP
htmlcssinternet-explorerresponsive-design
Beniamin Szabo
Beniamin Szabo

Reputation: 1929

Table responsiveness in IE

So. I am creating a small site to test my capabilities. In my site i have a page that in Firefox looks like this:

enter image description here

The additional files and additional actions buttons are inside a table. and each button is inside a <td> which are set to appear one under another with CSS using display:block; on the <td> element.

The problem is that when i open the page in IE9 or lower the td's are shown inline like this:

enter image description here

Because of this the responsiveness of the page is broken and resizing the viewport will move the page content below the left menu...

Here is the HTML of the tables:

<table class="buttons">
    <tbody>
       <tr>
          <th colspan="2">Additional files:</th>
       </tr>
       <tr>
          <td>
             <a id="cv" href="">Curriculum Vitae</a>
          </td>
          <td>
             <a id="cover" href="">Cover Letter</a>
          </td>
       </tr>
    </tbody>
</table>
<table class="buttons">        
    <tbody>
       <tr>
          <th colspan="3">Additional actions:</th>
       </tr>
       <tr>
          <td>
             <a class="approve" href="">Denie</a>
             <span style="display: none;">31</span>
          </td>
          <td>
             <a href="" class="mailto">Reply</a>
          </td>
          <td>
             <a href="" class="link-fain delete-app">Delete</a>
          </td>
       </tr>
    </tbody>
</table>

And this is the CSS:

.buttons {
    float: left;
    margin: 20px auto 0;
    width: 50%;
}
.buttons td {
    display: block;
    width: 100%;
}

Can anyone suggest me a solution? Thank you in advance!

Upvotes: 1

Views: 2206

Answers (2)

Spudley
Spudley

Reputation: 168725

The real answer here is that you shouldn't be using <table> tags for this. What you have there is not a table, and so <table> is not semantically correct.

It's even worse because you're then overriding the default table layout by using display:block, which moves us even further away from wanting to use a <table>.

By using tables like this, and forcing the browser to restructure it with CSS, you're making it quite confusing for the browser. Particularly with the colspan attributes and then three columns of buttons, when you actually want them all in one column. Its easy to see why you'd get inconsistent behaviour with this, especially with older browsers.

So the solution here is to swap your <table> layout for a set of <div> elements. This will be semantically correct, and it will be easier to get it styled consistently. And you'll need less markup as well.

If you really want to carry on using tables for this layout, then you need to re-style all the elements -- display:block on the tr elements doesn't affect the display property of the table, tbody and tr elements, and these would also need to changed. But really, I would avoid that. Just use divs; it'll make things much cleaner.

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

You need to set table-layout: fixed; to your table and if still not working add a div inside td and manage the css which might work.

Upvotes: 4

Related Questions