在Flex容器内使表响应

时间:2016-10-19 13:15:55

标签: html css css3 html-table flexbox

我有两列,左列和右列在弹性下,比率为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;
&#13;
&#13;

这是工作示例:https://jsfiddle.net/c8aymoz5/

0 个答案:

没有答案