我正在尝试垂直对齐所有文本。
如果我删除 float:left;然后整张 table 就消失了?
.div-table{
display:table;
width:auto;
background-color:#ffffff;
border-spacing:20px;
}
.div-table-row{
display:table-row;
width:auto;
clear:both;
}
.div-table-col{
float:left;
display:table-column;
width:180px;
background-color:LightSteelBlue;
height:60px;
text-align: center;
box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.3) ;
vertical-align: middle;
}
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col" align="center">Mortgage Lender</div>
<div class="div-table-col">Type</div>
<div class="div-table-col">Initial Period (mths)</div>
<div class="div-table-col">Initial Rate (%)</div>
<div class="div-table-col">SVR (%)</div>
<div class="div-table-col">Max Amount (£'s)</div>
<div class="div-table-col">Max LTV (%)</div>
<div class="div-table-col">Monthly Repayment (£'s)</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Nationwide</div>
<div class="div-table-col">Fixed</div>
<div class="div-table-col">24</div>
<div class="div-table-col">1.99</div>
<div class="div-table-col">3.99</div>
<div class="div-table-col">1000000</div>
<div class="div-table-col">65</div>
<div class="div-table-col">Calc</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Nationwide</div>
<div class="div-table-col">Fixed</div>
<div class="div-table-col">24</div>
<div class="div-table-col">1.99</div>
<div class="div-table-col">3.99</div>
<div class="div-table-col">1000000</div>
<div class="div-table-col">65</div>
<div class="div-table-col">Calc</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Nationwide</div>
<div class="div-table-col">Fixed</div>
<div class="div-table-col">24</div>
<div class="div-table-col">1.99</div>
<div class="div-table-col">3.99</div>
<div class="div-table-col">1000000</div>
<div class="div-table-col">65</div>
<div class="div-table-col">Calc</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Nationwide</div>
<div class="div-table-col">Fixed</div>
<div class="div-table-col">24</div>
<div class="div-table-col">1.99</div>
<div class="div-table-col">3.99</div>
<div class="div-table-col">1000000</div>
<div class="div-table-col">65</div>
<div class="div-table-col">Calc</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Nationwide</div>
<div class="div-table-col">Fixed</div>
<div class="div-table-col">24</div>
<div class="div-table-col">1.99</div>
<div class="div-table-col">3.99</div>
<div class="div-table-col">1000000</div>
<div class="div-table-col">65</div>
<div class="div-table-col">Calc</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Nationwide</div>
<div class="div-table-col">Fixed</div>
<div class="div-table-col">24</div>
<div class="div-table-col">1.99</div>
<div class="div-table-col">3.99</div>
<div class="div-table-col">1000000</div>
<div class="div-table-col">65</div>
<div class="div-table-col">Calc</div>
</div>
</div>
出于正当理由,我正在使用 div 制作表格,所以请不要“您应该使用 <table>
来制作表格数据。” :)
谢谢
最佳答案
使用 th (display : table-header-group;):即
.div-table{
display:table;
}
.div-table-row{
display:table-row;
width:auto;
height:auto;
}
.thead{
display : table-header-group;
background:red;
}
.tbody{
display : table-row-group;
width:500px;
height:500px;
background:green;
}
.div-table-cell
{
display:table-cell;
width:100px;
height:100px;
}
关于html - div 样式表中的垂直对齐文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32721227/