-1
我需要一个固定的表格,然后我会在固定表格的右边动态地添加表格。为什么溢出不能在这个HTML代码中工作?
我的HTML代码是:
溢出-X:自动不起作用
<div class="col-md-4"> <table class="table table-bordered"> <thead> <tr> <th colspan="2">Fixed Table</th> </tr> <tr> <th colspan="2">Fixed Table</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Some Content</td> </tr> </tbody> </table> </div> <div class="col-md-8"> <div id="containerForTables" style="overflow-x: auto"> <div style="display: inline-block;"> <table class="table table-bordered" data-tablename="SOMEKEY"> <thead> <tr> <th colspan="3"> SOMEKEY </th> </tr> <tr> <th>SOMEKEY 1</th> <th>SOMEKEY 2</th> <th>SOMEKEY 3</th> </tr> </thead> <tbody></tbody> </table> </div> <div style="display: inline-block;"> <table class="table table-bordered" data-tablename="SOMEKEY"> <thead> <tr> <th colspan="3"> SOMEKEY </th> </tr> <tr> <th>SOMEKEY 1</th> <th>SOMEKEY 2</th> <th>SOMEKEY 3</th> </tr> </thead> <tbody></tbody> </table> </div> <div style="display: inline-block;"> <table class="table table-bordered" data-tablename="SOMEKEY"> <thead> <tr> <th colspan="3"> SOMEKEY </th> </tr> <tr> <th>SOMEKEY 1</th> <th>SOMEKEY 2</th> <th>SOMEKEY 3</th> </tr> </thead> <tbody></tbody> </table> </div> <div style="display: inline-block;"> <table class="table table-bordered" data-tablename="SOMEKEY"> <thead> <tr> <th colspan="3"> SOMEKEY </th> </tr> <tr> <th>SOMEKEY 1</th> <th>SOMEKEY 2</th> <th>SOMEKEY 3</th> </tr> </thead> <tbody></tbody> </table> </div> <div style="display: inline-block;"> <table class="table table-bordered" data-tablename="SOMEKEY"> <thead> <tr> <th colspan="3"> SOMEKEY </th> </tr> <tr> <th>SOMEKEY 1</th> <th>SOMEKEY 2</th> <th>SOMEKEY 3</th> </tr> </thead> <tbody></tbody> </table> </div> <div style="display: inline-block;"> <table class="table table-bordered" data-tablename="SOMEKEY"> <thead> <tr> <th colspan="3"> SOMEKEY </th> </tr> <tr> <th>SOMEKEY 1</th> <th>SOMEKEY 2</th> <th>SOMEKEY 3</th> </tr> </thead> <tbody></tbody> </table> </div> <div style="display: inline-block;"> <table class="table table-bordered" data-tablename="SOMEKEY"> <thead> <tr> <th colspan="3"> SOMEKEY </th> </tr> <tr> <th>SOMEKEY 1</th> <th>SOMEKEY 2</th> <th>SOMEKEY 3</th> </tr> </thead> <tbody></tbody> </table> </div> </div> </div>
我希望这样的事情(看水平滚动条):