CODEWITHSUNDEEP
htmlcss
ItJustWerks
ItJustWerks

Reputation: 581

Stacking <td> elements not working

This seems like it should be pretty simple, and everything works as expected in a local HTML example, but something is messing with my code and I can't figure out what it is.

At the following dev URL (http://mountdoracoffeehouse.weebly.com/test.html) I have a simple <table> at the very top of the page. This is just to strip it down to the most basic functionality, the real application will be with other <table> elements on the site. The site is built using Weebly's CMS, which unfortunately uses <table>'s to create columns. when you view a Weebly site on a mobile device, they load a mobile stylesheet that sets the <td> elements to display:block, causing them to stack. This is what's not working for me. I am not using Weebly's default mobile stylesheet, and am instead creating my own.

So I have the following HTML structure:

<table>
   <tbody>
      <tr>
         <td>This is td 1</td>
         <td>This is td 2</td>
      </tr>
   </tbody>
</table>

...and the following CSS:

<style type="text/css">
   table {
      width:100%;
      table-layout:fixed;
   }
   td {
      width:100%;
      display:block !important;
   }
</style>

Can anyone mess with the DOM via Inspector and figure out what is getting in the way of this code working? I'm slamming my head on the desk as I type this after hours of frustration.

Thanks, ~Nathan

Upvotes: 0

Views: 190

Answers (1)

Leo Farmer
Leo Farmer

Reputation: 7900

I think you should use divs to lay this out rather then table. Have a look at the display options here:

http://www.w3schools.com/cssref/pr_class_display.asp

You can use the table ones to align your divs like a table.

Upvotes: 1

Related Questions