表變量列大小

Question

我有一個表如下：

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp"> 
    <thead> 
     <tr> 
      <th class="mdl-data-table__cell--non-numeric">Select</th> 
      <th class="mdl-data-table__cell--non-numeric"><input type="number" name="id" [(ngModel)]="filter.id" placeholder="Id"></th> 
      <th class="mdl-data-table__cell--non-numeric"><input type="text" name="What" [(ngModel)]="filter.what" placeholder="Title"></th> 
      <th class="mdl-data-table__cell--non-numeric"><input type="text" name="how_often" [(ngModel)]="filter.how_often" placeholder="How often"></th> 
      <th class="mdl-data-table__cell--non-numeric"><input type="text" name="how_important" [(ngModel)]="filter.how_important" placeholder="How important"></th> 

      <th class="mdl-data-table__cell--non-numeric"><input type="text" name="how_imp_improvement" [(ngModel)]="filter.how_imp_improvement" placeholder="How important is improvement"></th> 
      <th class="mdl-data-table__cell--non-numeric"><input type="text" name="what_advantage_of_improvement" [(ngModel)]="filter.what_advantage_of_improvement" placeholder="Why important is improvement"></th> 

      <th class="mdl-data-table__cell--non-numeric"><input type="number" name="feature" [(ngModel)]="filter.featureId" placeholder="Feature"></th> 
      <th class="mdl-data-table__cell--non-numeric"><input type="number" name="stakeholderId" [(ngModel)]="filter.stakeholderId" placeholder="Stakeholder"></th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <td colspan="9"> 
       <span style="float: left;"><p>Total tasks: {{numberOfTasks}} </p></span> 
       <label for="limit">Limit: </label><input type="number" name="limit" [(ngModel)]="limit" min="1" [attr.max]="[numberOfTasks]" step="1" placeholder="Limit"> 
       <label for="page">Page: </label><input type="number" name="page" [(ngModel)]="page" min="1" [attr.max]="[numberOfTasks]" step="1" placeholder="Page"> 
      </td> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr *ngFor="let task of tasks | taskfilter:filter | slice:(page-1)*limit:page*limit" (click)="openTask(task)"> 
      <td><input *ngIf="!task.featureId" type="checkbox" [ngModel]="checkboxValue" (ngModelChange)="addToFeature($event, task)" ></td> 
      <td class="mdl-data-table__cell--non-numeric">{{task.taskId}}</td> 
      <td class="mdl-data-table__cell--non-numeric">{{task.what}}</td> 
      <td class="mdl-data-table__cell--non-numeric">{{task.how_often}}</td> 
      <td class="mdl-data-table__cell--non-numeric">{{task.how_important}}</td> 
      <td class="mdl-data-table__cell--non-numeric">{{task.how_imp_improvement}}</td> 
      <td class="mdl-data-table__cell--non-numeric">{{task.what_advantage_of_improvement}}</td> 
      <td class="mdl-data-table__cell--non-numeric">{{task.featureId}}</td> 
      <td class="mdl-data-table__cell--non-numeric">{{task.stakeholderId}}</td> 
     </tr> 
    </tbody> 
</table> 

而且它的CSS：

.mdl-data-table { 
    table-layout:fixed; 
    width: 100%; 
} 
#my-table td, th { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
} 

th,td,input,p,footer,li,label { 
    color: #404040; 
    font-size: 14px; 
} 

table thead th, table tfoot td { 
    background-color: lightgray; 
    border: 1px solid gray; 
    padding: 4px; 
} 
table td { 
    border: 1px solid gray; 
    padding: 2px 4px; 
} 
table input { 
    padding: 4px 2px; 
} 
table input[type=number] { 
    font-size: 10px; 
    width: 100px; 
} 
table input[type=text] { 
    font-size: 10px; 
    width: 95%; 
} 

這些設置給我的所有列具有固定寬度。然而，很少的列可以狹窄，很少應占用更多的寬度以正確地看內容。

例如，前兩個和後兩個列的寬度可能較小 - 僅佔用內容。我怎樣才能做到這一點？

Answer 1

我不知道如果我理解正確的你，但，請嘗試更改表格佈局自動

.mdl-data-table { 
    table-layout:auto; 
    width: 100%; 
}