コンテナの幅は、テーブルの幅に基づいて動的である必要があります

テーブルのコンテナを実装しようとしているため、カードクラスを使用することにしました。スクリーンショットに見られるように、コンテナは画面の幅全体に広がっています。コンテナの幅をテーブルの幅に基づいて設定したいと思います。私の場合、データが水平方向にレンダリングされると、テーブルの幅が変わる可能性があります。コンテナを動的にするにはどうすればよいですか。画面サイズを超えると、水平スクロールが表示されます。下のスクリーンショットでわかるように、次の行に折り返され、上部の右側にギャップがあります

スクリーンショット

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>

アーロンズのコメントに基づく応用ソリューション