HTML两个表行大小相关?

时间:2017-10-01 16:23:02

标签: html css

我有两个表类。不同的paddingfont-size,让我们说一切都不同。我把它们放在一起。

有没有办法强制table2的行“完成”table1的行,按照我的height编写一个确切的height

这很方便,因为paddingfont不同,所以如果我想让两个表看起来像是一个表,我必须计算并计算行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>

0 个答案:

没有答案