Prevent tables from relocating

Question

Prevent tables from relocating

18 views Asked by user1700890 At 07 June 2015 at 00:34

I have 5 tables in a row in HTML document. I would like them to stay in a row when I change zoom.

Currently, if I zoom they start to move and ultimately can transform from one row to one column. I do not mind to have very big horizontal scroll.

Any suggestions?

Original Q&A

There are 2 answers

Zerium On 07 June 2015 at 00:44

It is inefficient for whole tables to stay in one row when you resize your browser. Regardless, you could try this:

<table>
  <tr>
    <td>
      <!-- Put table 1 here -->
    </td>
    <td>
      <!-- Put table 2 here -->
    </td>
    <td>
      <!-- Put table 3 here -->
    </td>
    <td>
      <!-- Put table 4 here -->
    </td>
    <td>
      <!-- Put table 5 here -->
    </td>
  </tr>
</table>

See how that works out for you.

**Pralhad Narsinh Sonar** · Accepted Answer · 2015-06-07 00:52:29

<html>
<head>
<style>
table tr td{border:1px solid #c4c4c4}
</style>
</head>
<body>
<table>
  <tr>
    <td>
        <table>
            <tr>
                <td>Table # 1 - Data</td>
                <td>Table # 1 - Data</td>
            </tr>
            <tr>
                <td>Table # 1 - Data</td>
                <td>Table # 1 - Data</td>
            </tr>
            <tr>
                <td>Table # 1 - Data</td>
                <td>Table # 1 - Data</td>
            </tr>            
        </table>
    </td>
    <td>
        <table>
            <tr>
                <td>Table # 2 - Data</td>
                <td>Table # 2 - Data</td>
            </tr>
            <tr>
                <td>Table # 2 - Data</td>
                <td>Table # 2 - Data</td>
            </tr>
            <tr>
                <td>Table # 2 - Data</td>
                <td>Table # 2 - Data</td>
            </tr>            
        </table>
    </td>
    <td>
        <table>
            <tr>
                <td>Table # 3 - Data</td>
                <td>Table # 3 - Data</td>
            </tr>
            <tr>
                <td>Table # 3 - Data</td>
                <td>Table # 3 - Data</td>
            </tr>
            <tr>
                <td>Table # 3 - Data</td>
                <td>Table # 3 - Data</td>
            </tr>            
        </table>
    </td>
  </tr>
</table>
</body>
</html>

Use the above code or simly visit http://jsfiddle.net/BRxKX/4964/ to see the demo

TechQA.

Prevent tables from relocating

There are 2 answers

Related Questions in HTML

Related Questions in HTML-TABLE

Popular Questions

Popular Tags

Trending Questions