我有两列,左列和右列在弹性下,比率为2到4。
右侧有长桌,当左侧达到最小宽度时,右侧的桌子变得固定,宽度不起作用,因此桌子溢出。
我尝试修复了table-layout,但它导致列相互溢出。
如何使表格具有响应性,以便在缩放时具有oveflow-x auto?
.flexeWarp {
display: flex;
}
.flexLeft {
flex: 2 0 0;
background: red;
}
.flexRight {
flex: 4 0 0;
}
.table-responsive {
background: #fff none repeat scroll 0 0;
margin: 0 0 1em;
overflow-y: auto;
padding: 0;
width: 100%;
min-height: 0.01%;
overflow-x: auto;
}
.table {
margin: auto;
width: 95%;
}

<div class="flexeWarp">
<div class="flexLeft">
some very long texttexttexttextt
</div>
<div class="flexRight">
<div class="table-responsive boxShadow">
<table class="table tableW longTBL">
<thead>
<tr>
<th>Server</th>
<th>Database name</th>
<th class="hidden-xs">Schema</th>
<th class="hidden-xs">Table name</th>
<th>Index name</th>
<th>Index id</th>
<th>Clustered</th>
<th>Fill factor</th>
<th>Scan density</th>
<th>Logical frag.</th>
<th>Ext.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pitt</td>
<td>12/3/2016 13:00</td>
<td>Pitt</td>
<td class="hidden-xs">DBA Services</td>
<td class="hidden-xs">New York</td>
<td>HN300DB</td>
<td>Last data update - 7 days ago</td>
<td>HN300DB</td>
<td>Last data update - 7 days ago</td>
<td>HN300DB</td>
<td>Last data update - 7 days ago</td>
</tr>
<tr>
<td>Pitt</td>
<td>12/3/2016 13:00</td>
<td>Pitt</td>
<td class="hidden-xs">DBA Services</td>
<td class="hidden-xs">New York</td>
<td>HN300DB</td>
<td>Last data update - 7 days ago</td>
<td>HN300DB</td>
<td>Last data update - 7 days ago</td>
<td>HN300DB</td>
<td>Last data update - 7 days ago</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
&#13;