html - 表变量列大小

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%; 
}