防止表重定位

Question

我在 HTML 文档中连续有 5 个表。当我改变缩放比例时，我希望他们保持一排。

目前，如果我缩放它们，它们就会开始移动，最终可以从一行变成一列。我不介意有很大的水平滚动。

有什么建议吗？

Answer 1

当您调整浏览器大小时，整个表格都排成一行是低效的。不管怎样，你可以试试这个：

<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>

看看你的结果如何。

Answer 2

<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>

使用上面的代码或者直接访问http://jsfiddle.net/BRxKX/4964/看demo

防止表重定位

Prevent tables from relocating

html

html-table