我有两个表类。不同的padding
,font-size
,让我们说一切都不同。我把它们放在一起。
有没有办法强制table2的行“完成”table1的行,按照我的height
编写一个确切的height
?
这很方便,因为padding
和font
不同,所以如果我想让两个表看起来像是一个表,我必须计算并计算行height
使它们适合
table.right1 {
float: left;
vertical-align: top;
display: inline-box;
border-collapse: separate;
width: 1%;
margin: 0px;
}
table.right1 tr:nth-child(even) {
color: #FFB5F9;
border-color: #000;
background: #292929;
}
table.right1 tr:nth-child(odd) {
background: #292929;
border-color: #000;
color: #45ADFD;
}
table.sty {
background: #000;
border-collapse: separate;
box-shadow: inset 0 1px 0 #000;
margin: 0px;
text-align: center;
float: left;
display: inline-box;
width: 1%;
}
table.sty th {
background: #292929;
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #000;
padding: 1px 1px;
position: relative;
text-shadow: 0 1px 0 #000;
}
table.sty td {
border-right: 1px solid #000 border-left: 1px solid #e8e8e8;
border-top: 1px solid #616161;
border-bottom: 1px solid #292929;
padding: 6px 15px;
position: relative;
transition: all 300ms;
}
table.sty tr {
background: #292929;
}
table.sty tr:nth-child(odd) td {
background: #292929;
color: #C7C7C7;
}
table.sty tr:nth-child(even) {
background: #292929;
color: #fff;
}
<table class="right1" border="1" bgcolor="#292929" cellpadding="11" cellspacing="1" rowspan="1">
<tbody>
<tr height="400">
<td>
<div style="width: 100px;">
<center> 1 </center>
</div>
</td>
</tr>
<tr height="51">
<td>
<div style="width: 100px;">
<center> 2 </center>
</div>
</td>
</tr>
<tr height="51">
<td>
<div style="width: 100px;">
<center> 3 </center>
</div>
</td>
</tr>
<tr height="51">
<td>
<div style="width: 100px;">
<center> 4 </center>
</div>
</td>
</tr>
<tr height="51">
<td>
<div style="width: 100px;">
<center> 1 </center>
</div>
</td>
</tr>
<tr height="51">
<td>
<div style="width: 100px;">
<center> 5 </center>
</div>
</td>
</tr>
<!-------------- --------- ---->
</tbody>
</table>
<!---------------------------------------------------------------- ---->
<!--__________________________CONTENT______________________________ -->
<table class="sty">
<tbody>
<tr height="50">
<!--___________ 000 _____________________________ -->
<!--------------------------------HUN------------------------------------->
<td>
<div style="width: 100px;">
<center>
lorem ipsum
</br>
</center>
</div>
</td>
<td style="background-color: #000 ; border-right: 1px solid #4C82C0; "> . </td>
<!---------------------------------ENG------------------------------------>
<td>
<div style="width: 110px;">
<center>
lorem ipsum
</center>
</div>
</td>
<td style="background-color: #000 ; border-right: 1px solid #4C82C0; width=1 ;"> . </td>
<!---------------------------------GER------------------------------------>
<td>
<div style="width: 110px;">
<center>
lorem ipsum
</center>
</div>
</td>
<td style="background-color: #000 ; border-right: 1px solid #4C82C0; width=1 ;"> . </td>
</tr>
<tr height="300">
<!--___________ 000 _____________________________ -->
<!--------------------------------HUN------------------------------------->
<td>
<div style="width: 100px;">
<center>
lorem ipsum
</br>
</center>
</div>
</td>
<td style="background-color: #000 ; border-right: 1px solid #4C82C0; "> . </td>
<!---------------------------------ENG------------------------------------>
<td>
<div style="width: 110px;">
<center>
lorem ipsum
</center>
</div>
</td>
<td style="background-color: #000 ; border-right: 1px solid #4C82C0; width=1 ;"> . </td>
<!---------------------------------GER------------------------------------>
<td>
<div style="width: 110px;">
<center>
lorem ipsum
</center>
</div>
</td>
<td style="background-color: #000 ; border-right: 1px solid #4C82C0; width=1 ;"> . </td>
</tr>