0
我正在尝试创建一个css表格。 这工作正常,直到我开始为第一列设置固定宽度。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;
}
现在,结果是这样的:
正如你可以看到第二列不再与第一个对齐。
有一点需要记住,对表格数据使用'
我很清楚这一点。我是学习CSS。 –
回答
我认为问题不是固定的
width
,而是display: flex;
你添加内联,它是凌驾display: table-cell;
。您可能想在标签的内部内容中使用
display: flex;
。来源
2017-05-30 07:24:51
在this fiddle
发出定额是显示:在您的HTML flex属性:
最小宽度仍适用,并表的行为是背到正常。
来源
2017-05-30 07:26:58 Leogiciel
相关问题