Stack two <td> through each other

Question

I'm currently working on making the site responsive, but the problem is that I need to make it responsive without touching the contents of the page. That way everything remains the same on the page, but with a new stylesheet and a little Javascript (but mostly CSS). I am looking to complete this task.

The website is created mainly using tables .. therefore, when the browser is changed (or accessible using a mobile device), I want the second "td" inside my "tr" to fold under the first, and not like the 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 and Safari both "td" are 50% on the same line.

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

Answer 1

Use display:block on 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> 

<a class="run-snippet btn btn-primary" href="javascript:void(0);"><i class="fas fa-play-circle"></i> </a><a class="close-snippet" href="javascript:void(0);"><i class="far fa-times-circle"></i> </a><div class="clearfix"></div>

Answer 2

Try using CSS by changing the display, so it jumps to another line:

 td { display: block; clear:both; } 

See the example just made.

Answer 3

Have you tried placing two div inside the table cell with float left on them. When a table collapses, they must add up.

Answer 4

It looks like you are using tables for layout, not tabular data. Tables should be used only for tabular data.

Instead, you will need to group the content ; more specifically, a div element:

 <div> <div>Top</div> <div>Bottom</div> </div> 

It is worth noting that depending on what type of content is present in your upper and lower containers, you can use another element as a whole .

Answer 5

What you are trying to do will either fail or cause a serious headache. Tables are not intended to be used for flexible design. If you say that you cannot touch the code, you are very stuck. The best way to get around this would be to rewrite the code and replace any tables with DIV, Ps, etc., where appropriate, and use CSS, jquery, and media queries to make your site respond.

The only way a user can currently respond to a site is to use jquery when loading the page to replace all tables with DIV, Ps, etc., and then use CSS, jquery and media queries to try to do The site is responsive, It is not recommended for this, and I can not even guarantee that it will work 100%.

Answer 6

Another possibility is to embed a government site inside an iframe , so you can use something like jQuery to accomplish what you want on the site.