尝试了不少网上的方法，但还是不奏效。请大师指点一下。

目的就是让两个表格并排，上面对齐。左边表格是新品的pin map，有很多cell，右边表格是内容相对简单的动态表格（用户操作页面时自动增加行数）。要求右边表格内容变化时（变宽时）即便增加横向滚动条也不要跑到第一个表格的下面去。

现在的代码简化如下。

<table>
<tr><td>

<table border=1 width=100 id=pinmap cellspacing=0 cellpadding=0 style="table-layout:fixed; float:left">
...
</table>

<table class="msgClass" cellspacing=0 style="margin-left: 15px; float: left">
...
</table>

</td></tr>
</table>
--
FROM 114.165.175.*

用bootstrap可以这样：

<div class="row">
    <div class="col-sm-6">
        <div class="table-response">
            <table class="table">
                <tbody>
                    <tr>
                        <td>a</td>
                        <td>b </td>
                    </tr>
                    <tr>
                        <td>a</td>
                        <td>b </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="table-response">
            <table class="table">
                <tbody>
                    <tr>
                        <td>a</td>
                        <td>b </td>
                    </tr>
                    <tr>
                        <td>a</td>
                        <td>b </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
--
FROM 23.239.5.*

http://jsfiddle.net/gz7LueuL/

in parts:
#1 http://stackoverflow.com/questions/1032914/how-to-make-a-div-to-fill-a-remaining-horizontal-space-a-very-simple-but-annoyi
(the most upvoted answer, not the accepted one)

#2 display: block; on table to get overflow-x: auto;

【 在 cowell (紫禁飞狐) 的大作中提到: 】
: 尝试了不少网上的方法，但还是不奏效。请大师指点一下。
: 目的就是让两个表格并排，上面对齐。左边表格是新品的pin map，有很多cell，右边表格是内容相对简单的动态表格（用户操作页面时自动增加行数）。要求右边表格内容变化时（变宽时）即便增加横向滚动条也不要跑到第一个表格的下面去。
: 现在的代码简化如下。
: ...................
--
FROM 180.173.119.*

感谢各位的指点。
解决方案很多，学习了！
--
FROM 114.165.175.*