css table：第一列固定宽度答案

【问题标题】：css table : first column with fixed widthcss table：第一列固定宽度
【发布时间】：2017-05-30 15:33:15
【问题描述】：

我正在尝试创建一个 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;
    }

现在，结果是这样的：

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

【问题讨论】：

有一点要记住，将<table> 用于表格数据并没有错，而且看起来您确实拥有表格数据。在这里使用 CSS 表格肯定有正当理由，但不要在这里随意丢弃表格。
我很清楚这一点。我正在学习 CSS。

标签： css tabular

【解决方案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>

【讨论】：

【解决方案2】：

固定在this fiddle

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

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

仍然应用最小宽度，并且表格的行为恢复正常。

【讨论】：