Actually there is a site with a table layout, you need to make it adaptive. If with the block structure I understand the principle (max-width and percentages), then in the table layout it is not. What better way to do?

2 answers 2

It is better to turn over on blocks of course. But if this is impossible (anything can happen), that is, some kind of hack, otherwise I will not name it because the tables are intended solely for displaying tabular information. Its essence lies in the transformation of tabular elements into blocks.

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <meta charset="utf-8" /> <style> #header { background-color: aqua; } #sidebar { background-color: aquamarine; width: 300px; } table { width: 100%; } @media(max-width: 960px) { table, tr, td, tbody { display: block; width: 100%; } #header, #sidebar, #content { width: 100%; } } </style> </head> <body> <table> <tr> <td id="header" colspan="2"> <h1>Header</h1> </td> </tr> <tr> <td id="sidebar"> <h2>Sidebar</h2> </td> <td id="content"> <h2>Content</h2> </td> </tr> </table> </body> </html>

This is of course a simple example, but if there is no other possibility, then how a temporary solution will work. But if you have a complex layout, it is better to override the blocks.

    I also indicate percentages and min or max width, I see no difficulty.

    The principle is that with the desired width of the screen of the smartphone, the unnecessary cell becomes display: none. And add lines from below or from above where you need to display: block on your smartphone and display: none on your computer

    Thus, you may have to repeat the code in two lines. The table is the table. It consists of columns, rows and the actual cells. You need to understand where to move the cell.

    If you want some actions that are not possible with the table, then it is easier to turn them over into blocks. If the question is how best to proceed: it is better to turn over to blocks . You can specifically ask what action to do with the table. And you can contact a specialist

    • quite to my mind the answer ... If you need something more specific, I can answer. Well, if a person understands the principle with a block, I don’t see any particular difference. Maybe not right - Mikhail Sosnin
    • on a narrow screen, this will not work; in a wonderful layout, sidebars are transferred down or up, all divas are 100% wide, that's what the person wanted to know, most likely. - Jean-Claude
    • Well, if you need it, you can do this so that with the desired width of the screen of the smartphone, the unnecessary line becomes display: none. And add lines from below or from above where it is necessary for the smartphone to display: block and on the computer display: none - Mikhail Sosnin
    • Thus, you may have to repeat the code in two lines. The table is the table. It consists of columns, rows and the actual cells. You need to understand where to move the cell. - Mikhail Sosnin
    • If you want some actions that are not possible with the table, then it is easier to turn them over into blocks. If the question is how best to proceed: it is better to turn over to blocks. You can specifically ask what action to do with the table. And you can contact a specialist) - Mikhail Sosnin