How is it right to make an adaptive tab?



  • There's actually a website with a tabular verb, and we need to adapt it. If I understand the principle with the blade structure (max-width and percentages), there is no signpost. What better do I do?



  • You'd better stop on the blocks. But if that's not possible, that is, some kind of hack, I'm not gonna name it because the tables are meant exclusively for the display of tabular information. Its essence is to transform the panels 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>

    It's a simple example, but if there's no other option, then how a temporary solution will fit. But if you've got a complicated maquet, you better stop blocks.


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2