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>

# GET /users
  def index
    @users = User.all
    render json: {data: @users, status: httpstatus[:getSuccess]}
    # render json: {data: @users, status: httpstatus[:getSuccess]}
  end

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>

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

css表：具有固定宽度的第一列

2 个答案: