Html 无法获取所有父容器宽度

我试图在所有容器宽度上显示表，实际上我使用的是引导的

col-sm-2

类和

可隐藏侧栏。这是我的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>


资源
foo
测试
foo
测试
foo
测试


这是我需要拍摄的最终结果的图像：

只需添加
宽度：100%到您的表格，就像我在这里做的那样：

我希望这就是您正在搜索的内容：）
这是完整的代码

只需复制并超越它。

<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 border='1' style="margin-top: 10px; height: 396px; width: 100%;">
                <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>
                <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:#F4CCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
                </table>

            </div>


资源
foo
测试
foo
测试
foo
测试
为什么不根据自己的需要调整css？好的，那就这样做吧？是什么阻碍了你？这么简单，从没想过。谢谢，新年快乐不客气，新年快乐如果我的答案解决了您的问题，请将其标记为正确答案：）当然，请稍候