Question

我正在尝试为我的表实现一个容器，因此选择使用卡片类。从屏幕快照中可以看到，容器延伸到屏幕的整个宽度。我希望容器宽度基于表格的宽度。在我的情况下，表格的宽度可以随着数据的呈现而变化水平地。我如何使我的容器动态。如果水平滚动超出屏幕尺寸，则应出现水平滚动。正如您在下面的屏幕截图中所看到的，它环绕到下一行，并且顶部右侧有空白

屏幕截图

html

<style>
    th,
    td {
        padding: 7px;
    }

   .scrollClass {
    overflow-x: scroll;
    }
    .fundClassesTable {
        margin: 0 auto;
        font-size: 11px;
        width: 100%;
    }

    .tableItem {
        text-align: center;
        border-left: solid 1px lightgrey;
        border-top: solid 1px lightgrey;
        border-right: solid 1px lightgrey;
        border-bottom: solid 1px lightgrey;

    }

    .rowItem:hover {
        background-color: #f5f7f7;
    }



    tr {
        display: block;
        float: left;
    }

    th,
    td {
        display: block;
        min-height: 46px;
        min-width: 300px;
    }

    label {
        margin-left: 0.5rem;
        vertical-align: middle
    }


    .panel-heading {
        color: white;
        background-color: #F59850;
        border-color: #ddd;
        overflow: hidden;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .panel-heading .left-label {
        display: inline-block;
        padding-top: 5px !important;

    }

    .panel-heading label {
        margin-bottom: 0px !important;
    }
</style>

<div>
    <input type="checkbox" id="chk" style="width: 13px; height: 13px;" />
    <label for="chk">Invested</label>

</div>

<div class="card scrollClass">
    <div class="card-header panel-heading">
        <span class="left-label" style="font-size: 18px; font-weight: bold; ">Fund Classes</span>
        <div class="pull-right" style="padding-right:10px; display: inline-block; vertical-align:middle">
            <!-- <label style="text-align: center; vertical-align:middle" class="btn btn-default pull-right"> <i
                    data-bind="visible: true" class="fa fa-plus-square"></i><input type="checkbox" class="hidden" /> Add
                Class</label> -->
            <button style="text-align: center; vertical-align:middle" class="btn btn-default pull-right" (click)="openFundClassModal()"> <i
                data-bind="visible: true" class="fa fa-plus-square"></i> Add Class</button>    
        </div>
    </div>

    <div *ngIf="FundClasses && FundClasses.FundDetailsViewModel">

        <table class="fundClassesTable table-striped">

            <tr>
                <th class="tableItem bold">Fund Name</th>
                <th class="tableItem bold">Accounting Class Name</th>
                <th class="tableItem bold">Class ID</th>
                <th class="tableItem bold">Legal Fund Class</th>
                <th class="tableItem bold">Inception Date</th>
                <th class="tableItem bold">Invested Amount</th>
                <th class="tableItem bold">Vehicle Type</th>
                <th class="tableItem bold">Closure Status</th>
                <th class="tableItem bold">Is Side Pocket?</th>
                <th class="tableItem bold">Is Thematic?</th>
                <th class="tableItem bold">Cogency Class?</th>
                <th class="tableItem"></th>
            </tr>

            <ng-container *ngFor="let fundClass of FundClasses.FundDetailsViewModel">
                <tr *ngFor="let f of fundClass['FundClassDetailsViewModel'] | keyvalue">
                    <td class="tableItem">{{ f.value.FundName}}</td>
                    <td class="tableItem">{{ f.value.Description}}</td>
                    <td class="tableItem">{{f.value.Id}}</td>
                    <td *ngIf="EditMode[f.value.Id]" class="tableItem">
                        <kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.LegalFundClassId"
                            class="form-control  form-control-sm" [data]="fundClass.PrimaryLegalFundClasses"
                            [filterable]="false" textField="Description" [valuePrimitive]="true" valueField="Id">
                        </kendo-dropdownlist>
                    </td>
                    <td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
                        {{ f.value.LegalFundClassName}}
                    </td>
                    <td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
                        <kendo-datepicker style="width:100%" [format]="'MMMM yyyy'" [topView]="'decade'"
                            [bottomView]="'year'" [(ngModel)]="f.value.InceptionDate"
                            class="form-control  form-control-sm">
                        </kendo-datepicker>
                    </td>
                    <td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
                        {{ f.value.InceptionDate | date:"'MMMM yyyy"}}
                    </td>
                    <td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem" style="width:100%">
                        <input kendoTextBox [(ngModel)]="f.value.InvestedAmount"
                            style="width: 284px; height: 29.5px;" />
                    </td>
                    <td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
                        {{ f.value.InvestedAmount | number : '.2-2'}}
                    </td>
                    <td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
                        <kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.VehicleTypeId"
                            class="form-control  form-control-sm" [data]="FundClasses.VehicleTypes" [filterable]="false"
                            textField="Name" [valuePrimitive]="true" valueField="Id"></kendo-dropdownlist>
                    </td>
                    <td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
                        {{ f.value.VehicleTypeName}}
                    </td>
                    <td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
                        <kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.ClosureStatusId"
                            class="form-control  form-control-sm" [data]="FundClasses.ClosureStatuses"
                            [filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
                        </kendo-dropdownlist>
                    </td>
                    <td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
                        {{ f.value.ClosureStatusName}}
                    </td>
                    <td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
                        <input type="checkbox" value="{{f.value.IsSidePocket}}" id="chk"
                            style="width: 13px; height: 13px;" />
                        <label for="chk">Yes</label>

                    </td>
                    <td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
                        {{ f.value.IsSidePocket == true ? 'Yes' : 'No'}}
                    </td>
                    <td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
                        <input type="checkbox" value="{{f.value.IsThematic}}" style="width: 13px; height: 13px;" />
                        <label for="chk">Yes</label>
                    </td>
                    <td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
                        {{ f.value.IsThematic == true ? 'Yes' : 'No'}}
                    </td>
                    <td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
                        <kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.CogencyClassId"
                            class="form-control  form-control-sm" [data]="fundClass.CogencyClasses" [filterable]="false"
                            textField="Name" [valuePrimitive]="true" valueField="Id"></kendo-dropdownlist>
                    </td>
                    <td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
                        {{ f.value.CogencyClassId}}
                    </td>
                    <td class="tableItem">

                        <button *ngIf="!EditMode[f.value.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-4"
                            (click)="buttonClicked(f.value.Id)">Edit</button>
                        <button *ngIf="EditMode[f.value.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-3"
                            (click)="Update(f.value.Id)">Save</button>
                        <button *ngIf="EditMode[f.value.Id]" type="button" class="btn btn-primary btn mr-1  col-sm-3"
                            (click)="buttonClicked(f.value.Id)">Delete</button>
                        <button *ngIf="EditMode[f.value.Id]" type="button" class="btn btn-primary btn mr-1  col-sm-3"
                            (click)="buttonClicked(f.value.Id)">Cancel</button>

                    </td>
                </tr>
            </ng-container>
        </table>
    </div>
</div>


<shared-modal [modalSize]="1" class="survey-edit" [open]="fundClassWindowOpened">
    <div style="width: 100%;" header>
        <h4 class="modal-title">
            <div style="text-align: right"><button aria-label="Dismiss" class="close"
                    style="margin-top: -48px" type="button" (click)="dismissFundClassModal()">X</button>
            </div>
        </h4>
    </div>
    <div body>
        <mgr-addFundClass></mgr-addFundClass>

    </div>
    <div footer>
    </div>
</shared-modal>

基于Aarons评论的应用解决方案

Answer 1

基于这些评论，我想我现在已经了解您。首先，让我们删除使用float: left将容器排成一行的过时方法：

tr {
  display: block;
  float: left; //<== Remove this line
  min-width: 300px; //<== Optional: Just to make sure your table columns don't get too small if they have less content.
}

让我们使用一些更现代的东西，例如flexbox。因此，将display: flex;添加到tbody中。
问题是您仍然有空白。要填充此内容，请在每个tr上使用flex-grow。最后归结为：

.fundClassesTable tbody {
  display: flex;
}

.fundClassesTable tbody tr {
  flex-grow: 1;
}

.scrollClass {
  overflow-x: scroll;
  display: grid; //<== Add this line.
}

以下是您的示例（如果愿意，可以使用http://jsfiddle.net/h5oc70va/1/）：

.fundClassesTable tbody {
  display: flex;
}

th,
td {
  padding: 7px;
}

.scrollClass {
  overflow-x: scroll;
  display: grid;
}

.fundClassesTable {
  margin: 0 auto;
  font-size: 11px;
  width: 100%;
}

.tableItem {
  text-align: center;
  border-left: solid 1px lightgrey;
  border-top: solid 1px lightgrey;
  border-right: solid 1px lightgrey;
  border-bottom: solid 1px lightgrey;
}

.rowItem:hover {
  background-color: #f5f7f7;
}

tr {
  display: block;
  flex-grow: 1;
}

th,
td {
  display: block;
  min-height: 46px;
  min-width: 300px;
}

label {
  margin-left: 0.5rem;
  vertical-align: middle
}

.panel-heading {
  color: white;
  background-color: #F59850;
  border-color: #ddd;
  overflow: hidden;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.panel-heading .left-label {
  display: inline-block;
  padding-top: 5px !important;
}

.panel-heading label {
  margin-bottom: 0px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />

<div>
  <input type="checkbox" id="chk" style="width: 13px; height: 13px;" />
  <label for="chk">Invested</label>

</div>

<div class="card scrollClass">
  <div class="card-header panel-heading">
    <span class="left-label" style="font-size: 18px; font-weight: bold; ">Fund Classes</span>
    <div class="pull-right" style="padding-right:10px; display: inline-block; vertical-align:middle">
      <!-- <label style="text-align: center; vertical-align:middle" class="btn btn-default pull-right"> <i
                    data-bind="visible: true" class="fa fa-plus-square"></i><input type="checkbox" class="hidden" /> Add
                Class</label> -->
      <button style="text-align: center; vertical-align:middle" class="btn btn-default pull-right" (click)="openFundClassModal()"> <i
                data-bind="visible: true" class="fa fa-plus-square"></i> Add Class</button>
    </div>
  </div>

  <div *ngIf="FundClasses && FundClasses.FundDetailsViewModel">

    <table class="fundClassesTable table-striped">

      <tr>
        <th class="tableItem bold">Fund Name</th>
        <th class="tableItem bold">Accounting Class Name</th>
        <th class="tableItem bold">Class ID</th>
        <th class="tableItem bold">Legal Fund Class</th>
        <th class="tableItem bold">Inception Date</th>
        <th class="tableItem bold">Invested Amount</th>
        <th class="tableItem bold">Vehicle Type</th>
        <th class="tableItem bold">Closure Status</th>
        <th class="tableItem bold">Is Side Pocket?</th>
        <th class="tableItem bold">Is Thematic?</th>
        <th class="tableItem bold">Cogency Class?</th>
        <th class="tableItem"></th>
      </tr>

      <ng-container *ngFor="let fundClass of FundClasses.FundDetailsViewModel">
        <tr *ngFor="let f of fundClass['FundClassDetailsViewModel'] | keyvalue">
          <td class="tableItem">{{ f.value.FundName}}</td>
          <td class="tableItem">{{ f.value.Description}}</td>
          <td class="tableItem">{{f.value.Id}}</td>
          <td *ngIf="EditMode[f.value.Id]" class="tableItem">
            <kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.LegalFundClassId" class="form-control  form-control-sm" [data]="fundClass.PrimaryLegalFundClasses" [filterable]="false" textField="Description" [valuePrimitive]="true" valueField="Id">
            </kendo-dropdownlist>
          </td>
          <td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
            {{ f.value.LegalFundClassName}}
          </td>
          <td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
            <kendo-datepicker style="width:100%" [format]="'MMMM yyyy'" [topView]="'decade'" [bottomView]="'year'" [(ngModel)]="f.value.InceptionDate" class="form-control  form-control-sm">
            </kendo-datepicker>
          </td>
          <td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
            {{ f.value.InceptionDate | date:"'MMMM yyyy"}}
          </td>
          <td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem" style="width:100%">
            <input kendoTextBox [(ngModel)]="f.value.InvestedAmount" style="width: 284px; height: 29.5px;" />
          </td>
          <td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
            {{ f.value.InvestedAmount | number : '.2-2'}}
          </td>
          <td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
            <kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.VehicleTypeId" class="form-control  form-control-sm" [data]="FundClasses.VehicleTypes" [filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id"></kendo-dropdownlist>
          </td>
          <td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
            {{ f.value.VehicleTypeName}}
          </td>
          <td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
            <kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.ClosureStatusId" class="form-control  form-control-sm" [data]="FundClasses.ClosureStatuses" [filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
            </kendo-dropdownlist>
          </td>
          <td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
            {{ f.value.ClosureStatusName}}
          </td>
          <td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
            <input type="checkbox" value="{{f.value.IsSidePocket}}" id="chk" style="width: 13px; height: 13px;" />
            <label for="chk">Yes</label>

          </td>
          <td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
            {{ f.value.IsSidePocket == true ? 'Yes' : 'No'}}
          </td>
          <td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
            <input type="checkbox" value="{{f.value.IsThematic}}" style="width: 13px; height: 13px;" />
            <label for="chk">Yes</label>
          </td>
          <td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
            {{ f.value.IsThematic == true ? 'Yes' : 'No'}}
          </td>
          <td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
            <kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.CogencyClassId" class="form-control  form-control-sm" [data]="fundClass.CogencyClasses" [filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id"></kendo-dropdownlist>
          </td>
          <td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
            {{ f.value.CogencyClassId}}
          </td>
          <td class="tableItem">

            <button *ngIf="!EditMode[f.value.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-4" (click)="buttonClicked(f.value.Id)">Edit</button>
            <button *ngIf="EditMode[f.value.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-3" (click)="Update(f.value.Id)">Save</button>
            <button *ngIf="EditMode[f.value.Id]" type="button" class="btn btn-primary btn mr-1  col-sm-3" (click)="buttonClicked(f.value.Id)">Delete</button>
            <button *ngIf="EditMode[f.value.Id]" type="button" class="btn btn-primary btn mr-1  col-sm-3" (click)="buttonClicked(f.value.Id)">Cancel</button>

          </td>
        </tr>
      </ng-container>
    </table>
  </div>
</div>


<shared-modal [modalSize]="1" class="survey-edit" [open]="fundClassWindowOpened">
  <div style="width: 100%;" header>
    <h4 class="modal-title">
      <div style="text-align: right"><button aria-label="Dismiss" class="close" style="margin-top: -48px" type="button" (click)="dismissFundClassModal()">X</button>
      </div>
    </h4>
  </div>
  <div body>
    <mgr-addFundClass></mgr-addFundClass>

  </div>
  <div footer>
  </div>
</shared-modal>

如果您需要任何解释，请告诉我，但我认为代码应该是不言自明的。

容器宽度需要根据表格宽度动态变化

1 个答案: