mobile-web-table-layout–Making an old table layout reponsive

Media Files

📦 Media File Download (45.4 KB)

Project Submission

+ Submit Assignment

Your submissions

Background

Given the following old table-based layout. Please use CSS to make the layout responsive to small screen.

You may add classes to HTML if needed.

Requirement

You can get started with the following codepen:

https://codepen.io/makzan/pen/qvgWPv

or the following HTML:

<table class='container' width=1000>
  <tr>
    <td colspan=999>
      <h1>Demo on making an old table layout reponsive</h1>
    </td>
  </tr>
  <tr>
  </tr>
  <tr class='row'>
    <td class=menu width=100 valign=top>
      <table width=100>
        <tr><td><a href="#">Link 1</a></td></tr>
        <tr><td><a href="#">Link 2</a></td></tr>
        <tr><td><a href="#">Link 3</a></td></tr>
        <tr><td><a href="#">Link 4</a></td></tr>
        <tr><td><a href="#">Link 5</a></td></tr>
        <tr><td><a href="#">Link 6</a></td></tr>
        <tr><td><a href="#">Link 7</a></td></tr>
      </table>
    </td>
    <td class='main'>
      <p>MAIN HERE main content goes here.  main content goes here. main content goes here. main content goes here. main content goes here. main content goes here. main content goes here. main content goes here. main content goes here. main content goes here.</p>
      <p>MAIN HERE main content goes here.  main content goes here. main content goes here. main content goes here. main content goes here. main content goes here.</p>
      <p>MAIN HERE main content goes here.  main content goes here. main content goes here. main content goes here. </p>
      <p>MAIN HERE main content goes here.  main content goes here. main content goes here. main content goes here. main content goes here. main content goes here. main content goes here. main content goes here. main content goes here. main content goes here.</p>
    </td>
    <td class='sidebar' width=200 valign=top>
      <table width=100%>
        <tr>
          <td>
            <img src="http://placehold.it/500/500?text=Ads" alt="Ads placeholder" width=200>
          </td>
        </tr>
        <tr>
          <td>
            Side bar content
          </td>          
        </tr>
        <tr>
          <td>
            Side bar content
          </td>          
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td colspan=9999>
      <table>
        <tr class='row'>
          <td width=250>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
          </td>
          <td width=250>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
          </td>
          <td width=250>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
          </td>
          <td width=250>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr><td colspan=999>Copyright goes here</td></tr>
</table>

Please login to chat.