//Representation of table
<div class="search-table-outter">
<table class="table table-responsive search-table inner">
</table>
</div>

//Css to make Horizontal Dropdown

<style>

    .search-table{table-layout: auto; margin:40px auto 0px auto; }
    .search-table, td, th {
        border-collapse: collapse;
    }
th{padding:20px 7px; font-size:15px; color:#444;}
td{padding:5px 10px; height:35px;}
    .search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }


</style>

为div元素添加标签表，style="overflow-x:auto"

<div style="overflow-x:auto">
<table class="table table-bordered">
    <thead>
        <tr>
            <th><b>Name</b></th>
            <th><b>Username</b></th>
            <th><b>Email</b></th>
            <th><b>Avatar</b></th>
            <th><b>Status</b></th>
            <th><b>Action</b></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

为此使用CSS属性“overflow”。

简短的总结:

overflow: visible|hidden|scroll|auto|initial|inherit;

e.g.

table {
    overflow: scroll;
}

这个答案是我根据之前的解决方案和它的评论得出的，并添加了我自己的一些调整。这在响应式桌子上很适合我。

table {
  display: inline-block;
  overflow-x: auto;
  white-space: nowrap;
  // make fixed table width effected by overflow-x
  max-width: 100%;
  // hide all borders that make rows not filled with the table width
  border: 0;
}
// add missing borders
table td {
  border: 1px solid;
}

如前所述，使用display:block;在桌子上是坏的。我尝试了这个帖子中的大多数答案，没有一个像我想要的那样有效。如果你的HTML是这样结构的:

<div>
  <table>
    <tbody>

你想让父div水平滚动，你可以试试下面的方法:

.text-left {text-align:left;} /* Ignore */ .x-auto { overflow-x: auto; } .table { text-align: left; table-layout: fixed; width: 100%; white-space: nowrap; } .table tbody { display: table; width: 100%; } <div class="x-auto"> <table class="table text-left"> <tbody> <tr> <th>Head1</th> <th>Head2</th> </tr> <tr> <td>Some short text!</td> <td>Some really long text, like really really really really really really really really really really really really long!</td> </tr> </tbody> </table> </div>

不管怎样，我找到的最好答案是: https://github.com/filamentgroup/tablesaw/issues/58#issuecomment-63966574

table.tablesaw
{
    table-layout: fixed;
    max-width: none;
    width: auto;
    min-width: 100%;
}