CSS 表 : first column with fixed width

Question

我正在尝试创建一个 CSS 表格。这工作正常，直到我开始为第一列设置固定宽度。

所以基本上我有:

<div class="table" style="width:100%;">
    <div class="thead">
        <div class="table-row">
            <div class="table-cell" style="display:flex;align-items:center;min-width: 180px;max-width:180px;">Type</div>
            <div class="table-cell">Motif</div>
            <div class="table-cell">col3</div>
            <div class="table-cell">col4</div>
            <div class="table-cell">col5</div>
            <div class="table-cell">col6</div>
            <div class="table-cell">col7</div>
            <div class="table-cell">col8</div>
            <div class="table-cell">col9</div>
        </div>
    </div>
    <div class="tbody">
        <div class="table-row" ng-repeat="input in vm.inputs">
            <div class="table-cell" ng-mouseover="vm.hoverIn(input)" ng-mouseleave="vm.hoverOut(input)" style="display:flex;align-items:center;min-width: 180px;max-width:180px;">
                {{input.type}}
            </div>
            <div class="table-cell">{{input.reason}}</div>
            <div class="table-cell">{{input.cim10}}</div>
            <div class="table-cell">{{input.start | date:'dd/MM/yyyy' }}</div>
            <div class="table-cell">{{input.end | date:'dd/MM/yyyy'}}</div>
            <div class="table-cell">{{vm.computeDays(input.start, input.end)}}</div>
            <div class="table-cell">{{input.pending}}</div>
            <div class="table-cell">{{input.details}}</div>
            <div class="table-cell">{{input.comments}}</div>
        </div>
    </div>
</div>

使用以下 CSS:

div.table {
    display: table;
}

div.table > div.thead {
    display: table-header-group;
    background-color:lightgray;
}

div.table > div.tbody {
    display: table-row-group;
}

div.table > div.thead > div.table-row,
div.table > div.tbody > div.table-row {
    display: table-row;
}

    div.table > div.thead > div.table-row > div.table-cell {
        display: table-cell;
        font-weight: bold;
        padding: 3px 10px;
        border: 1px solid #999999;
    }

    div.table > div.tbody > div.table-row > div.table-cell {
        display: table-cell;
        padding: 3px 10px;
        border: 1px solid #999999;
        height: 42px;
        text-align: left;
        vertical-align: middle;
    }

现在，结果是这样的:

如您所见，第二列不再与第一列对齐。

Answer 1

我认为问题不在于固定的 width，而是 display: flex; 您添加的内联，它覆盖了 display: table-cell; 。

您可能希望在选项卡的内部内容中使用 display: flex;。

div.table {
    display: table;
}

div.table > div.thead {
    display: table-header-group;
    background-color:lightgray;
}

div.table > div.tbody {
    display: table-row-group;
}

div.table > div.thead > div.table-row,
div.table > div.tbody > div.table-row {
    display: table-row;
}

    div.table > div.thead > div.table-row > div.table-cell {
        display: table-cell;
        font-weight: bold;
        padding: 3px 10px;
        border: 1px solid #999999;
    }

    div.table > div.tbody > div.table-row > div.table-cell {
        display: table-cell;
        padding: 3px 10px;
        border: 1px solid #999999;
        height: 42px;
        text-align: left;
        vertical-align: middle;
    }
   

<div class="table" style="width:100%;">
    <div class="thead">
        <div class="table-row">
            <div class="table-cell" style="min-width: 100px;max-width:180px;">Type</div>
            <div class="table-cell">Motif</div>
            <div class="table-cell">col3</div>
            <div class="table-cell">col4</div>
            <div class="table-cell">col5</div>
            <div class="table-cell">col6</div>
            <div class="table-cell">col7</div>
            <div class="table-cell">col8</div>
            <div class="table-cell">col9</div>
        </div>
    </div>
    <div class="tbody">
        <div class="table-row" ng-repeat="input in vm.inputs">
            <div class="table-cell" ng-mouseover="vm.hoverIn(input)" ng-mouseleave="vm.hoverOut(input)" style="min-width: 100px;max-width:180px;">
                {{input.type}}
            </div>
            <div class="table-cell">{{input.reason}}</div>
            <div class="table-cell">{{input.cim10}}</div>
            <div class="table-cell">{{input.start | date:'dd/MM/yyyy' }}</div>
            <div class="table-cell">{{input.end | date:'dd/MM/yyyy'}}</div>
            <div class="table-cell">{{vm.computeDays(input.start, input.end)}}</div>
            <div class="table-cell">{{input.pending}}</div>
            <div class="table-cell">{{input.details}}</div>
            <div class="table-cell">{{input.comments}}</div>
        </div>
    </div>
</div>