我有一个引导表。当我将浏览器的大小调整到1200以下时，应该有overflow-x：scroll; 这是我试过的代码。
svg{
width:14px;
}
td{
font-size:16px;
}
@media (max-width:1200px){
.table-responsive{
overflow-x: scroll !important;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="table-responsive">
<table class="table b-t b-b no-footer">
<thead class="bg-white">
<tr class="font-bold no_border font_size_12">
<th class="sorting no_border" >
<div class="pull-left table_data_checkbox">
<div class="checkbox v-middle m-t-none m-b-none ">
<label class="i-checks i-checks-sm">
<input type="checkbox">
<i></i>
</label>
</div>
</div>
</th>
<th>Table head 1</th>
<th class="sorting no_border " >Table head 2</th>
<th class="sorting no_border " >Table head 3</th>
<th class="sorting no_border " >Table head 4</th>
<th class="sorting no_border " >Table head 5</th>
<th class="sorting no_border " >Table head 6</th>
<th class="sorting no_border " >Table head 7</th>
<th class="sorting no_border " >Table head 8</th>
<th class="sorting no_border " >Table head 9</th>
</tr>
</thead>
<tbody>
<tr class="odd cursor_pointer" >
<td valign="middle" >
<div class="table_data_checkbox">
<div class="checkbox v-middle m-t-none m-b-none ">
<label class="i-checks i-checks-sm">
<input type="checkbox">
<i></i>
</label>
</div>
</div>
</td>
<td valign="middle">Table Data 1</td>
<td valign="middle">Table Data 2</td>
<td valign="middle">Table Data 3</td>
<td valign="middle">Table Data 4</td>
<td valign="middle">Table Data 5</td>
<td valign="middle">Table Data 6</td>
<td valign="middle">Table Data 7</td>
<td valign="middle">Table Data 8</td>
<td>
<div class="particular_record_action_selection_div">
<span>
<svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;">
<path style="fill:#59666E;" d="M21.459,5.761l7.02,7.056L10.709,30.68l-7.016-7.056L21.459,5.761z M33.805,4.058l-3.13-3.147
c-1.21-1.215-3.176-1.215-4.389,0l-3,3.016l7.021,7.056l3.498-3.516C34.744,6.523,34.744,5.001,33.805,4.058z M0.02,33.542
c-0.127,0.578,0.391,1.095,0.965,0.955l7.822-1.907l-7.015-7.056L0.02,33.542z"/>
</svg>
</span>
<span class="m-l-sm">
<svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;">
<path style="fill:#59666E;" d="M26.663,7.373l-1.677,2.133c3.614,2.785,5.417,7.293,4.706,11.766
c-0.521,3.283-2.303,6.167-5.015,8.125c-2.714,1.956-6.033,2.75-9.348,2.232c-6.844-1.067-11.536-7.448-10.46-14.225
c0.521-3.284,2.303-6.169,5.015-8.126c2.369-1.708,5.201-2.527,8.087-2.365l-2.36,2.452l1.75,1.653l3.725-3.872v0.001l1.668-1.735
l-1.749-1.652h-0.001l-3.908-3.689l-1.67,1.735l2.546,2.403c-3.461-0.163-6.852,0.834-9.694,2.883
c-3.303,2.382-5.471,5.895-6.105,9.891c-1.31,8.249,4.4,16.017,12.731,17.314c0.805,0.125,1.609,0.188,2.409,0.188
c3.209,0,6.326-0.998,8.968-2.906c3.304-2.38,5.472-5.893,6.105-9.889C33.253,16.248,31.06,10.761,26.663,7.373z"/>
<path style="fill:#59666E;" d="M18.778,27.063L18.778,27.063L18.778,27.063v-1.555c1.862-0.207,3.675-1.372,3.675-3.583
c0-3.005-2.822-3.35-4.883-3.601c-1.318-0.157-2.327-0.337-2.327-1.128c0-1.099,1.565-1.217,2.238-1.217
c0.998,0,2.063,0.465,2.425,1.058l0.106,0.173l2.069-0.948l-0.102-0.207c-0.771-1.562-2.154-2.014-3.202-2.195v-1.371h-2.425v1.364
c-2.256,0.329-3.595,1.57-3.595,3.344c0,2.894,2.653,3.187,4.587,3.402c1.725,0.201,2.528,0.623,2.528,1.327
c0,1.343-1.878,1.448-2.455,1.448c-1.282,0-2.518-0.634-2.875-1.474l-0.088-0.208l-2.25,0.944l0.091,0.208
c0.665,1.543,2.102,2.51,4.058,2.74v1.479H18.778z"/>
</svg>
</span>
<span class="m-l-sm">
<svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;" >
<path style="fill:#59666E;" d="M4.973,8.047c0,0,0.923,0.875,0.923,1.384v22.401c0,1.482,1.325,2.686,2.96,2.686h16.85
c1.635,0,2.96-1.204,2.96-2.686V9.433c0-0.511,0.926-1.384,0.926-1.384V5.334H4.973V8.047z M22.121,11.148h2.201v17.296h-2.201
V11.148z M16.228,11.148h2.195v17.296h-2.195V11.148z M10.919,11.148h2.198v17.296h-2.198V11.148z"/>
<path style="fill:#59666E;" d="M30.667,3.093h-6.823c-0.341-1.731-2.011-3.05-4.015-3.05h-5.091c-2.005,0-3.675,1.319-4.015,3.05
H3.896V4.75h26.771V3.093z M13.007,3.093c0.28-0.613,0.951-1.045,1.728-1.045h5.093c0.778,0,1.446,0.435,1.729,1.045H13.007z"/>
</svg>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
你可以在浏览器中看到并调整它的大小，我想要溢出-x：当我在1200px以下调整浏览器大小时滚动;
任何帮助都会很棒。 谢谢。
答案 0 :(得分：1)
您还需要将宽度修正为1200px。 以下是css代码：
@media (max-width: 1200px) {
.table-responsive {
overflow-x: scroll !important;
width: 1200px;
}
}
答案 1 :(得分：1)
浏览器正在尝试拉伸表的内容以适应屏幕。如果你想让它显示滚动，那么你需要说这个表需要一个最小宽度 min-width：1200px;
希望这会有所帮助。 ;）
svg{
width:14px;
}
td{
font-size:16px;
}
@media (max-width:1200px){
.table-responsive{
min-width: 1200px; /* <-- ;) */
overflow-x: scroll !important;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="table-responsive">
<table class="table b-t b-b no-footer">
<thead class="bg-white">
<tr class="font-bold no_border font_size_12">
<th class="sorting no_border" >
<div class="pull-left table_data_checkbox">
<div class="checkbox v-middle m-t-none m-b-none ">
<label class="i-checks i-checks-sm">
<input type="checkbox">
<i></i>
</label>
</div>
</div>
</th>
<th>Table head 1</th>
<th class="sorting no_border " >Table head 2</th>
<th class="sorting no_border " >Table head 3</th>
<th class="sorting no_border " >Table head 4</th>
<th class="sorting no_border " >Table head 5</th>
<th class="sorting no_border " >Table head 6</th>
<th class="sorting no_border " >Table head 7</th>
<th class="sorting no_border " >Table head 8</th>
<th class="sorting no_border " >Table head 9</th>
</tr>
</thead>
<tbody>
<tr class="odd cursor_pointer" >
<td valign="middle" >
<div class="table_data_checkbox">
<div class="checkbox v-middle m-t-none m-b-none ">
<label class="i-checks i-checks-sm">
<input type="checkbox">
<i></i>
</label>
</div>
</div>
</td>
<td valign="middle">Table Data 1</td>
<td valign="middle">Table Data 2</td>
<td valign="middle">Table Data 3</td>
<td valign="middle">Table Data 4</td>
<td valign="middle">Table Data 5</td>
<td valign="middle">Table Data 6</td>
<td valign="middle">Table Data 7</td>
<td valign="middle">Table Data 8</td>
<td>
<div class="particular_record_action_selection_div">
<span>
<svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;">
<path style="fill:#59666E;" d="M21.459,5.761l7.02,7.056L10.709,30.68l-7.016-7.056L21.459,5.761z M33.805,4.058l-3.13-3.147
c-1.21-1.215-3.176-1.215-4.389,0l-3,3.016l7.021,7.056l3.498-3.516C34.744,6.523,34.744,5.001,33.805,4.058z M0.02,33.542
c-0.127,0.578,0.391,1.095,0.965,0.955l7.822-1.907l-7.015-7.056L0.02,33.542z"/>
</svg>
</span>
<span class="m-l-sm">
<svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;">
<path style="fill:#59666E;" d="M26.663,7.373l-1.677,2.133c3.614,2.785,5.417,7.293,4.706,11.766
c-0.521,3.283-2.303,6.167-5.015,8.125c-2.714,1.956-6.033,2.75-9.348,2.232c-6.844-1.067-11.536-7.448-10.46-14.225
c0.521-3.284,2.303-6.169,5.015-8.126c2.369-1.708,5.201-2.527,8.087-2.365l-2.36,2.452l1.75,1.653l3.725-3.872v0.001l1.668-1.735
l-1.749-1.652h-0.001l-3.908-3.689l-1.67,1.735l2.546,2.403c-3.461-0.163-6.852,0.834-9.694,2.883
c-3.303,2.382-5.471,5.895-6.105,9.891c-1.31,8.249,4.4,16.017,12.731,17.314c0.805,0.125,1.609,0.188,2.409,0.188
c3.209,0,6.326-0.998,8.968-2.906c3.304-2.38,5.472-5.893,6.105-9.889C33.253,16.248,31.06,10.761,26.663,7.373z"/>
<path style="fill:#59666E;" d="M18.778,27.063L18.778,27.063L18.778,27.063v-1.555c1.862-0.207,3.675-1.372,3.675-3.583
c0-3.005-2.822-3.35-4.883-3.601c-1.318-0.157-2.327-0.337-2.327-1.128c0-1.099,1.565-1.217,2.238-1.217
c0.998,0,2.063,0.465,2.425,1.058l0.106,0.173l2.069-0.948l-0.102-0.207c-0.771-1.562-2.154-2.014-3.202-2.195v-1.371h-2.425v1.364
c-2.256,0.329-3.595,1.57-3.595,3.344c0,2.894,2.653,3.187,4.587,3.402c1.725,0.201,2.528,0.623,2.528,1.327
c0,1.343-1.878,1.448-2.455,1.448c-1.282,0-2.518-0.634-2.875-1.474l-0.088-0.208l-2.25,0.944l0.091,0.208
c0.665,1.543,2.102,2.51,4.058,2.74v1.479H18.778z"/>
</svg>
</span>
<span class="m-l-sm">
<svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;" >
<path style="fill:#59666E;" d="M4.973,8.047c0,0,0.923,0.875,0.923,1.384v22.401c0,1.482,1.325,2.686,2.96,2.686h16.85
c1.635,0,2.96-1.204,2.96-2.686V9.433c0-0.511,0.926-1.384,0.926-1.384V5.334H4.973V8.047z M22.121,11.148h2.201v17.296h-2.201
V11.148z M16.228,11.148h2.195v17.296h-2.195V11.148z M10.919,11.148h2.198v17.296h-2.198V11.148z"/>
<path style="fill:#59666E;" d="M30.667,3.093h-6.823c-0.341-1.731-2.011-3.05-4.015-3.05h-5.091c-2.005,0-3.675,1.319-4.015,3.05
H3.896V4.75h26.771V3.093z M13.007,3.093c0.28-0.613,0.951-1.045,1.728-1.045h5.093c0.778,0,1.446,0.435,1.729,1.045H13.007z"/>
</svg>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
答案 2 :(得分：1)
当我们低于宽度768px以获得表格响应by default bootstrap behaviour时，以下css会触发。您所需要的只是在1200px以下触发此css。
@media screen and (max-width: 1200px){
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.table-responsive>.table>tbody>tr>td, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>td, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>thead>tr>th{white-space:nowrap;}
}
svg{
width:14px;
}
td{
font-size:16px;
}
@media screen and (max-width: 1200px){
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.table-responsive>.table>tbody>tr>td, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>td, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>thead>tr>th{white-space:nowrap;}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="table-responsive">
<table class="table b-t b-b no-footer">
<thead class="bg-white">
<tr class="font-bold no_border font_size_12">
<th class="sorting no_border" >
<div class="pull-left table_data_checkbox">
<div class="checkbox v-middle m-t-none m-b-none ">
<label class="i-checks i-checks-sm">
<input type="checkbox">
<i></i>
</label>
</div>
</div>
</th>
<th>Table head 1</th>
<th class="sorting no_border " >Table head 2</th>
<th class="sorting no_border " >Table head 3</th>
<th class="sorting no_border " >Table head 4</th>
<th class="sorting no_border " >Table head 5</th>
<th class="sorting no_border " >Table head 6</th>
<th class="sorting no_border " >Table head 7</th>
<th class="sorting no_border " >Table head 8</th>
<th class="sorting no_border " >Table head 9</th>
</tr>
</thead>
<tbody>
<tr class="odd cursor_pointer" >
<td valign="middle" >
<div class="table_data_checkbox">
<div class="checkbox v-middle m-t-none m-b-none ">
<label class="i-checks i-checks-sm">
<input type="checkbox">
<i></i>
</label>
</div>
</div>
</td>
<td valign="middle">Table Data 1</td>
<td valign="middle">Table Data 2</td>
<td valign="middle">Table Data 3</td>
<td valign="middle">Table Data 4</td>
<td valign="middle">Table Data 5</td>
<td valign="middle">Table Data 6</td>
<td valign="middle">Table Data 7</td>
<td valign="middle">Table Data 8</td>
<td>
<div class="particular_record_action_selection_div">
<span>
<svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;">
<path style="fill:#59666E;" d="M21.459,5.761l7.02,7.056L10.709,30.68l-7.016-7.056L21.459,5.761z M33.805,4.058l-3.13-3.147
c-1.21-1.215-3.176-1.215-4.389,0l-3,3.016l7.021,7.056l3.498-3.516C34.744,6.523,34.744,5.001,33.805,4.058z M0.02,33.542
c-0.127,0.578,0.391,1.095,0.965,0.955l7.822-1.907l-7.015-7.056L0.02,33.542z"/>
</svg>
</span>
<span class="m-l-sm">
<svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;">
<path style="fill:#59666E;" d="M26.663,7.373l-1.677,2.133c3.614,2.785,5.417,7.293,4.706,11.766
c-0.521,3.283-2.303,6.167-5.015,8.125c-2.714,1.956-6.033,2.75-9.348,2.232c-6.844-1.067-11.536-7.448-10.46-14.225
c0.521-3.284,2.303-6.169,5.015-8.126c2.369-1.708,5.201-2.527,8.087-2.365l-2.36,2.452l1.75,1.653l3.725-3.872v0.001l1.668-1.735
l-1.749-1.652h-0.001l-3.908-3.689l-1.67,1.735l2.546,2.403c-3.461-0.163-6.852,0.834-9.694,2.883
c-3.303,2.382-5.471,5.895-6.105,9.891c-1.31,8.249,4.4,16.017,12.731,17.314c0.805,0.125,1.609,0.188,2.409,0.188
c3.209,0,6.326-0.998,8.968-2.906c3.304-2.38,5.472-5.893,6.105-9.889C33.253,16.248,31.06,10.761,26.663,7.373z"/>
<path style="fill:#59666E;" d="M18.778,27.063L18.778,27.063L18.778,27.063v-1.555c1.862-0.207,3.675-1.372,3.675-3.583
c0-3.005-2.822-3.35-4.883-3.601c-1.318-0.157-2.327-0.337-2.327-1.128c0-1.099,1.565-1.217,2.238-1.217
c0.998,0,2.063,0.465,2.425,1.058l0.106,0.173l2.069-0.948l-0.102-0.207c-0.771-1.562-2.154-2.014-3.202-2.195v-1.371h-2.425v1.364
c-2.256,0.329-3.595,1.57-3.595,3.344c0,2.894,2.653,3.187,4.587,3.402c1.725,0.201,2.528,0.623,2.528,1.327
c0,1.343-1.878,1.448-2.455,1.448c-1.282,0-2.518-0.634-2.875-1.474l-0.088-0.208l-2.25,0.944l0.091,0.208
c0.665,1.543,2.102,2.51,4.058,2.74v1.479H18.778z"/>
</svg>
</span>
<span class="m-l-sm">
<svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;" >
<path style="fill:#59666E;" d="M4.973,8.047c0,0,0.923,0.875,0.923,1.384v22.401c0,1.482,1.325,2.686,2.96,2.686h16.85
c1.635,0,2.96-1.204,2.96-2.686V9.433c0-0.511,0.926-1.384,0.926-1.384V5.334H4.973V8.047z M22.121,11.148h2.201v17.296h-2.201
V11.148z M16.228,11.148h2.195v17.296h-2.195V11.148z M10.919,11.148h2.198v17.296h-2.198V11.148z"/>
<path style="fill:#59666E;" d="M30.667,3.093h-6.823c-0.341-1.731-2.011-3.05-4.015-3.05h-5.091c-2.005,0-3.675,1.319-4.015,3.05
H3.896V4.75h26.771V3.093z M13.007,3.093c0.28-0.613,0.951-1.045,1.728-1.045h5.093c0.778,0,1.446,0.435,1.729,1.045H13.007z"/>
</svg>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>