时间戳

首页 > 解决方案 > 如何移动右侧表格边距旁边的滚动条

html - 如何移动右侧表格边距旁边的滚动条

问题描述

我附上了图片，这样你就可以看到我遇到的问题。我想将 div 滚动移动到表格旁边，而不是现在的位置。此外，表格具有固定标题，因此每当您水平滚动时，其他元素都会位于第一个子 图像下方

.fixed {
  &.container {
    padding: 0px !important;
    overflow-x: auto;
    position: relative;
    max-height: 530px;
  }
  left: 0;
  max-width: auto;
  max-height: auto;
  position: relative;
  overflow-y: auto;
  table {
    position: relative;
    border-collapse: collapse;
    width: 1000px;
  }
  th {
    position: sticky;
    top: 0;
    background-color: #fff;
  }
  thead th {
    position: -webkit-sticky;
    /* for Safari */
    position: sticky;
    top: 0;
    background-color: white;
    min-width: 100px;
    height: 32px;
    border: 1px solid #222;
    z-index: 2;
  }
  thead th:first-child {
    padding-right: 2px;
    left: 1px;
    z-index: 999 !important;
    min-width: 300px;
    vertical-align: top !important;
    border-bottom: none;
    height: 50px;
  }
  tbody {
    width: 1000px;
    max-height: 450px;
  }
  tbody td {
    //background-color: #bbc;
    min-width: 100px;
    border: 1px solid #222;
  }
  @media screen and (min-width: 620px) {
    table {
      width: 638px !important;
    }
    td,
    th {
      width: auto !important;
    }
  }
  @media screen and (min-width: 520px) {
    table {
      width: 518px !important;
    }
    td,
    th {
      width: auto !important;
    }
  }
  tbody th {
    position: -webkit-sticky;
    /* for Safari */
    position: sticky;
    left: 1px;
    min-width: 100px;
    height: 50px;
    min-width: 300px;
    border-bottom: none;
    padding: 4px 0px !important;
    vertical-align: top !important;
    z-index: 2 !important;
    a {
      margin-left: 45px;
    }
  }
  table tr th,
  table tr td {
    outline: 1px solid #dfdfdf !important;
  }
}
<div class="container fixed" style="width:auto; padding: 0px !important; position: relative">
  <table class="table table-bordered-striped" st-table="vm.ration.feeds" st-safe-src="vm.feedsSafe" id="vitaminTable">
    <thead>
      <tr class="sortable" id="vitaminTr">
        <th style="height:77px" class="editable-header">
          <div class="fixed-action">
            <data-i18n i18n="_title_column_action_">Action</data-i18n>
            <br>
          </div>
          <div uib-tooltip="{{'_description_feed_name_' | i18n}}" tooltip-is-open="feedNameIsOpen" tooltip-placement="right" tooltip-class="customBlue right" tooltip-popup-delay='500' class="fixed-feed-name">
            <data-i18n i18n="_feeds_name_"></data-i18n>
            <br>
          </div>
        </th>
        <th style="min-width: 120px" st-sort="amount" class="editable-header">
          <div uib-tooltip="{{'_description_amount_dm_' | i18n}}" tooltip-is-open="amountIsOpen" tooltip-placement="right" tooltip-class="customBlue right" tooltip-popup-delay='500'>
            <data-i18n i18n="_feeds_amount_">amount</data-i18n>
            <br> {{vm.weight}}
          </div>
        </th>
        <th st-sort="vitamin_a" class="editable-header">
          <div uib-tooltip="{{'_description_vitamin_a_' | i18n}}" tooltip-is-open="vitAIsOpen" tooltip-placement="left" tooltip-class="customBlue left" tooltip-popup-delay='500'>
            <data-i18n i18n="_feeds_vit_a_">vit a</data-i18n>
            <br>
            <data-i18n i18n="_unit_iu_k_">IU</data-i18n>/{{vm.weight}}
          </div>
        </th>
        <th st-sort="vitamin_d" class="editable-header">
          <div uib-tooltip="{{'_description_vitamin_d_' | i18n}}" tooltip-is-open="vitDIsOpen" tooltip-placement="left" tooltip-class="customBlue left" tooltip-popup-delay='500'>
            <data-i18n i18n="_feeds_vit_d_">vit d</data-i18n>
            <br>
            <data-i18n i18n="_unit_iu_k_">IU</data-i18n>/{{vm.weight}}
          </div>
        </th>
        <th st-sort="vitamin_e" class="editable-header">
          <div uib-tooltip="{{'_description_vitamin_e_' | i18n}}" tooltip-is-open="vitEIsOpen" tooltip-placement="left" tooltip-class="customBlue left" tooltip-popup-delay='500'>
            <data-i18n i18n="_feeds_vit_e_">vit e</data-i18n>
            <br>
            <data-i18n i18n="_unit_iu_">IU</data-i18n>/{{vm.weight}}
          </div>
        </th>
      </tr>
    </thead>
    <tbody id="vitaminBody">
      <tr class="editable-tr-wrap" ng-style="feed.is_mix ? {backgroundColor: '#e5e5e5'} : {backgroundColor: '#ffffff'}" ng-cloak ng-repeat-start="(indexX, feed) in vm.ration.feeds | rationRepeatFilter">
        <th ng-style="feed.is_mix ? {backgroundColor: '#e5e5e5', height: '55px'} : {backgroundColor: '#ffffff'}" ng-cloak style="padding-left: 0px; padding-right: 0px;">
          <div class="fixed-action">
            <span class="newCheck">
                        <input type="checkbox" id="is_checked{{$index}}" ng-true-value="true" ng-false-value="false" ng-click="vm.select(feed)" ng-model="feed.is_selected">
                        <label for="is_checked{{$index}}" style="padding-left: 20px;"></label>
                    </span>
            <button type="button" class="btn btn-primary  btn-xs" ng-click="vm.goToFeedHistory(feed.id, feed.feed_locale)" uib-tooltip="{{vm.titleHistory | i18n}}" tooltip-is-open="historyIsOpen" tooltip-placement="right" tooltip-class="customBlue right" tooltip-popup-delay='500'><i class="ion-clock"></i></button>
            <button type="button" class="btn btn-primary  btn-xs" ng-click="vm.convertToFeed(feed, $index)" ng-if="feed.is_mix" uib-tooltip="{{vm.titleConvert | i18n}}" tooltip-is-open="convertIsOpen" tooltip-append-to-body="true" tooltip-placement="right" tooltip-class="customBlue right"
              tooltip-popup-delay='500'><i class=ion-arrow-swap></i></button>
            <button type="button" class="btn btn-primary  btn-xs" ng-click="vm.unmix(feed, $index)" ng-if="feed.is_mix" uib-tooltip="{{vm.titleUnmix | i18n}}" tooltip-append-to-body="true" tooltip-is-open="unmixIsOpen" tooltip-placement="right" tooltip-class="customBlue right"
              tooltip-popup-delay='500'><i class=ion-arrow-return-left></i></button>
            <br ng-if="feed.is_mix">
            <a class="ion-arrow" ng-click="vm.selectTableRow($index, feed.id)" href ng-class="feed.is_mix && vm.dataCollapse[$index] ? 'ion-arrow-up-b icon-edit' : 'ion-arrow-down-b icon-edit'" uib-tooltip="{{vm.titleExpand | i18n}}" tooltip-append-to-body="true"
              tooltip-is-open="expandIsOpen" tooltip-placement="right" tooltip-class="customBlue right" tooltip-popup-delay='500' ng-hide="!feed.is_mix"></a>
            <spinner ng-if="feed.loading" style="display: inline-block" class="spinner" name="mySpinner" img-src="assets/img/ring-table.gif" show="true"></spinner>
          </div>
          <div class="fixed-feed-name" style="min-width:120px"> <span editable-text="feed.feed_name" edit-disabled="vm.feed_loading" e-required onbeforesave="vm.updateFeed(feed, $index, $data, 'feed_name', 'H')" class="feed-name" style="display:inline-block" id="feed_name{{$index}}H" e-ng-keydown="vm.feedKeyDown($event, $data)"
              uib-tooltip="{{feed.feed_name}}" tooltip-is-open="H$index" tooltip-placement="right" tooltip-class="customBlue right" tooltip-popup-delay='500'><i class="fa fa-circle feed-type-dot" aria-hidden="true" ng-class="feed.feed_category == 'DF' ? 'dry-forage' : (feed.feed_category == 'WF' ? 'wet-forage' : (feed.feed_category == 'FA' ? 'fat' : (feed.feed_category == 'MIX' ? 'mix' : (feed.feed_category == 'C' ? 'corn' : (feed.feed_category == 'TRI' ? 'triglyceride' : (feed.feed_category == 'Forage' ? 'forage' : (feed.feed_category == 'Concentrate' ? 'concentrate' : (feed.feed_category == 'Commercial' ? 'commercial' : ''))))))))"></i>{{feed.feed_name}}</span></div>
        </th>
        <td style="min-width: 120px; padding: 3px 3px;"><span e-step="any" editable-number="feed.amount" edit-disabled="vm.feed_loading" e-min="0" e-max="1000000" onbeforesave="vm.updateFeed(feed, $index, $data, 'amount', 'V')" e-ng-keydown="vm.feedKeyDown($event, $data)" id="amount{{$index}}V">{{feed.amount | number: 2}}</span></td>
        <td style="padding: 3px 3px;"><span edit-disabled="vm.feed_loading || feed.is_mix" e-step="1" editable-number="feed.vitamin_a" e-min="0" e-max="1000000" onbeforesave="vm.updateFeed(feed, $index, $data, 'vitamin_a', 'V')" e-ng-keydown="vm.feedKeyDown($event, $data)" id="vitamin_a{{$index}}V">{{feed.vitamin_a  | number: 0}}</span></td>
        <td style="padding: 3px 3px;"><span edit-disabled="vm.feed_loading || feed.is_mix" e-step="1" editable-number="feed.vitamin_d" e-min="0" e-max="1000000" onbeforesave="vm.updateFeed(feed, $index, $data, 'vitamin_d', 'V')" e-ng-keydown="vm.feedKeyDown($event, $data)" id="vitamin_d{{$index}}V">{{feed.vitamin_d  | number: 0}}</span></td>
        <td style="padding: 3px 3px;"><span edit-disabled="vm.feed_loading || feed.is_mix" e-step="1" editable-number="feed.vitamin_e" e-min="0" e-max="1000000" onbeforesave="vm.updateFeed(feed, $index, $data, 'vitamin_e', 'V')" e-ng-keydown="vm.feedKeyDown($event, $data)" id="vitamin_e{{$index}}V">{{feed.vitamin_e  | number: 0}}</span></td>
      </tr>
      <tr class="editable-tr-wrap" ng-repeat-start="(indexY, mixfeed) in feed.mixes" ng-show="vm.dataCollapse[indexX]==true" ng-if="feed.is_mix" style="background-color:#c6c6c6">
        <th style="background-color:#c6c6c6">
          <div class="fixed-action">
            <button type="button" class="btn btn-primary  btn-xs" ng-click="vm.addFeedToMix(mixfeed)" ng-if="$index == 0" uib-tooltip="{{vm.titleAddFeedToMix | i18n}}" tooltip-is-open="addIsOpen" tooltip-placement="right" tooltip-class="customBlue right" tooltip-popup-delay='500'
              style="margin-top: 5px;"><i class="ion-plus-round"></i></button>
            <button type="button" class="btn btn-primary  btn-xs" ng-click="vm.removeFeedFromMix(mixfeed, $index)" uib-tooltip="{{vm.titleRemoveFeedFromMix | i18n}}" tooltip-is-open="remove$indexIsOpen" tooltip-placement="right" tooltip-class="customBlue right" tooltip-popup-delay='500'
              style="margin-top: 5px;"><i class="ion-minus-round"></i></button></div>
          <spinner ng-if="mixfeed.loading" style="display: inline-block" class="spinner" name="mySpinner" img-src="assets/img/ring-table.gif" show="true"></spinner>
          <div class="fixed-feed-name"><span editable-text="mixfeed.feed_name" edit-disabled="vm.mixfeed_loading" e-required onbeforesave="vm.updateFeedMix(mixfeed, $index, $data, 'feed_name', 'H')" class="feed-name" id="feed_nameMIX{{$index}}H{{indexX}}" e-ng-keydown="vm.mixKeyDown($event, $data)"
              uib-tooltip="{{mixfeed.feed_name}}" tooltip-is-open="H$indexM$indexX" tooltip-placement="right" tooltip-class="customBlue right" tooltip-popup-delay='500'><i class="fa fa-circle feed-type-dot" aria-hidden="true" ng-class="mixfeed.feed_category == 'DF' ? 'dry-forage' : (mixfeed.feed_category == 'WF' ? 'wet-forage' : (mixfeed.feed_category == 'FA' ? 'fat' : (mixfeed.feed_category == 'MIX' ? 'mix' : (mixfeed.feed_category == 'C' ? 'corn' : (mixfeed.feed_category == 'TRI' ? 'triglyceride' : (mixfeed.feed_category == 'Forage' ? 'forage' : (mixfeed.feed_category == 'Concentrate' ? 'concentrate' : (mixfeed.feed_category == 'Commercial' ? 'commercial' : ''))))))))"></i>{{mixfeed.feed_name}}</span></div>
        </th>
        <td style="min-width: 120px; padding: 3px 3px;"><span e-step="any" edit-disabled="vm.mixfeed_loading" editable-number="mixfeed.amount" e-min="0" e-max="1000000" onbeforesave="vm.updateFeedMix(mixfeed, $index, $data, 'amount', 'V', feed.id)" id="amountMIX{{$index}}V{{indexX}}" e-ng-keydown="vm.mixKeyDown($event, $data)">{{mixfeed.amount | number: 2}}</span></td>
        <td style="padding: 3px 3px;"><span e-step="1" edit-disabled="vm.mixfeed_loading" editable-number="mixfeed.vitamin_a" e-min="0" e-max="1000000" onbeforesave="vm.updateFeedMix(mixfeed, $index, $data, 'vitamin_a', 'V', feed.id)" id="vitamin_aMIX{{$index}}V{{indexX}}" e-ng-keydown="vm.mixKeyDown($event, $data)">{{mixfeed.vitamin_a  | number: 0}}</span></td>
        <td style="padding: 3px 3px;"><span e-step="1" edit-disabled="vm.mixfeed_loading" editable-number="mixfeed.vitamin_d" e-min="0" e-max="1000000" onbeforesave="vm.updateFeedMix(mixfeed, $index, $data, 'vitamin_d', 'V', feed.id)" id="vitamin_dMIX{{$index}}V{{indexX}}" e-ng-keydown="vm.mixKeyDown($event, $data)">{{mixfeed.vitamin_d  | number: 0}}</span></td>
        <td style="padding: 3px 3px;"><span e-step="1" edit-disabled="vm.mixfeed_loading" editable-number="mixfeed.vitamin_d" e-min="0" e-max="1000000" onbeforesave="vm.updateFeedMix(mixfeed, $index, $data, 'vitamin_e', 'V', feed.id)" id="vitamin_eMIX{{$index}}V{{indexX}}" e-ng-keydown="vm.mixKeyDown($event, $data)">{{mixfeed.vitamin_e  | number: 0}}</span></td>
      </tr>
      <tr ng-repeat-end ng-if="feed.is_mix"></tr>
      <tr ng-repeat-end></tr>
    </tbody>
  </table>

标签： htmlcss

解决方案

如果您希望垂直滚动条（溢出-y）位于表格旁边而不是窗口右侧，则必须将容器的显示属性设置为inline-block：

.container {
    display: inline-block;
    padding: 0px !important;
    overflow-y: scroll;
    position: relative;
    max-height: 530px;
}

推荐阅读