Stack two <td> over each other

Question

I'm currently working on making a website responsive but the issue is, I need to make it responsive without touching the content of the page. So everything stays the same on the page, but with a new stylesheet and a little Javascript (but mainly CSS) I'm looking to accomplish this task.

The website is made mostly with tables.. so when the browser is resized (or accessed with a mobile device), I want the second 'td' inside my 'tr' to stack under the first one instead of both being next to each other.

I gave the 'td' element a left float and a width of 100% and it worked fine in Firefox, but in Chrome & Safari, both 'td' are 50% and on the same line.

Let me know if you have any ideas, anything is appreciated!

Answer 1

Use display:block on your tr td to adapt the layout.

tr td {
  padding: 20px 40px;
  border: 1px solid black;
  display: block;
}

<table>
  <tr>
    <td>Damn</td>
    <td>This</td>
    <td>Table</td>
    <td>Layout</td>
  </tr>
</table>

Answer 2

Try with CSS changing the display, so it goes to the other line:

td {
  display: block;
  clear:both;
}

See an example just made

Answer 3

What your trying to do will either not work or cause you a massive headache. Tables aren't designed to be used for responsive design. If you say you can't touch the code then you're very stuck. The best way to get around this would be to re-write the code and replace any tables with DIVs, Ps etc. where relevant and the use CSS, jquery and media queries to make your site responsive.

The only way you can try make the site responsive currently would be to use jquery on page load to replace all the tables with DIVs, Ps etc and then go about using CSS, jquery and media queries to try and make the site responsive. This is not a recommended way to do it and I can't even guarantee this will work 100%.