css table : 固定宽度的第一列

Question

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

所以基本上我有：

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

Answer 2

已在 this fiddle

中修复

问题是 html 中的 display:flex 属性：

<div class="table-cell" style="display:flex;align-items:center;min-width: 180px;max-width:180px;">Type</div>

仍然应用最小宽度，table 的行为恢复正常。

css table : 固定宽度的第一列

css table : first column with fixed width

css

tabular