想用一个列表和table并排，如何让列表里的项优先占满显示?

Question

我希望列表和table并排，在一个bootstrap的选项卡下面.用div display:inline好像没效果。就用了table:

<div class="tab-pane active" style="overflow:auto" id="panel-124825">
                    <table style="min-width:400px;"><tr><td style="min-width:100px">
                    <ul class="list-unstyled">
                        <li><input type="checkbox">设备1<br/>&nbsp设备名</li>            
                <li>
                    设备2
                </li>
                <li>
                    设备3
                </li>                
            </ul>
        </td><td >
            <table class="table table-striped table-bordered">
                <thead>    <tr>
                <th>
                最近5分钟最大值
                </th>
                <th>
                最近24小时最大值
                </th>                                                    
                </tr>
                </thead>
                <tbody >                
                </tbody>
                </table>
                </td></tr>
        </table>
                    </div>

现在的问题是，列表里的设备名称长度不定，我希望左边的列表能优先显示不换行右边的table里的项目就随便了。请教该如何做(不一定需要table布局但我在bootstrap选项卡下尝试display:inline等都无法并置列表和table)

Answer 1

你是想要大概如下图这样一个布局吗？

左边是一个ul li列表，右边是一个table。

直接使用bootstrap.min.css的栅格系统布局：

<!--  左侧 -->
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 pt10">
    <!--  你的列表 -->
    <ul class="list-unstyled">
                <li><input type="checkbox">设备1<br/> 设备名</li>            
                <li>
                    设备2
                </li>
                <li>
                    设备3
                </li>                
     </ul>
</div>

<!--  右侧 -->
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
    <!--  你的table表 -->
    <table class="table table-striped table-bordered">
    </table>
</div>

大致是这个思路，你可能还需要写很多样式来达到你想要的效果。