Container width needs to be dynamic based on the table width

Question

i am trying to implement a container for my table and hence chose to use card class. As seen in the screenshot the the container extends to the entire width of the screen. I want the container width to be based on the width of the table. The width of the table in my case can change as the data is rendered horizontally. How could i make my container dynamic. The horizontal scroll should appear if it goes beyond the screensize. As you can see in the screenshot below it is wrapping to the next line and there is gap on the right sideat the top

screenshot

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>

Applied solution based on Aarons comments

Answer 1

So based on the comments I think I understand you now. First of all lets remove the very outdated approach of using float: left to put containers in a row:

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.
}

Let's use something more contemporary like flexbox. So add display: flex; to your tbody.
Problem is you still got an empty space. To fill that up use flex-grow on each tr. At the end it comes down to this:

.fundClassesTable tbody {
  display: flex;
}

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

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

Here is your example (or http://jsfiddle.net/h5oc70va/1/ if you prefer):

.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>

If you need any explanation let me know but I believe the code should be self-explanatory.