我试图在所有容器宽度上显示表格,实际上我正在使用col-sm-2类和bootstrap的hideable-sidebar。这是我的html结构:

<div class="col-sm-2 hideable-sidebar" id="resource_container">

            <h4>Resource</h4>

            <div class="input-group">
                <input type="text" placeholder="search" class="form-control" >
                <span class="input-group-btn">
                    <button class="clear btn btn-default" type="button">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                    </span>
            </div>

            <table style="margin-top: 10px; height: 396px;" border='1'>
            <tr id="res-1"><td style="background-color:#FF000C" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
            <tr id="res-1"><td style="background-color:#F41FF2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
            <tr id="res-1"><td style="background-color:#FFCCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
            </table>

        </div>


And here the JSFIDDLE

这是我需要采取的最终结果的图像:

html - 无法获取所有父容器的宽度-LMLPHP

最佳答案

就像我在这里一样,只需将width: 100%;添加到您的表中即可:
https://jsfiddle.net/DTcHh/28309/

我希望这是您要搜索的:)

09-17 12:12
查看更多