Question

我在父表格的单元格中包含两个彼此相邻的表格。是否有任何方法（或者可以使用的技巧）使两个子表适合使用HTML和CSS的父单元格的高度？

因此，如果一个单元格的内容多于另一个单元格，那么它们的高度都相同。

＆＃13;

<table cellpadding="0" border="1" cellspacing="0" style="border:none; border:thin solid black; width:600px;" align="center">
  <tr>
    <td>
      <!--left table-->
      <table cellpadding="0" border="0" cellspacing="0" style="width:86px; height:100%; background-color:#808080; margin-left:0px;" align="left">
        <tr>
          <td cellpadding="0" cellspacing="0" border="0" style="background-color:#808080; color:white;" align="center">
            Fit the height of the right side?
          </td>
        </tr>
      </table>
      <!--right table-->
      <table cellpadding="4" border="0" cellspacing="0" style="width:500px; height:100%;">
        <tr>
          <td align="left" height="42" valign="middle" cellspacing="0" border="0" style="background-color:#000000; padding-left:10px; color:white;">
            Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

＆＃13;

Answer 1

除非父级具有固定高度（可能不是您想要的），否则无法将table高度设置为100%。

因此，我将该父TD拆分为两个TD s ，并带有所需的背景颜色

<table cellpadding="0" border="1" cellspacing="0" style="border:none; border:1px solid black; width:600px;" align="center">
  <tr>

    <td style="vertical-align:top; background: #808080; color:white; width:86px;">
      <table cellpadding="4" cellspacing="0" border="0">
        <tr>
          <td align="center">
            Fit the height of the right side?
          </td>
        </tr>
      </table>
    </td>

    <td style="vertical-align:top; background: #000000; color:white; padding-left:10px;">
      <table cellpadding="4" cellspacing="0" border="0">
        <tr>
          <td align="left">
            Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

两个儿童桌并排放在一个高度相同的牢房中

1 个答案: