Question

我有两列，一个有更多的内容=更大，但我希望黑色的那个高度与右边相同。

enter image description here

有一种解决方法是在表宽度高度100％附近添加div并显示：inline-block，但这是一个丑陋的黑客。

任何人都知道解决方案吗？

<table class="body">
        <tr>
            <td class="center" align="center" valign="top">
        <center>

            <table class="container">
              <tr>
                <td>

                <table class="row">
                  <tr>
                    <td class="wrapper">

                      <table class="six columns" style="background-color: black; color: white;">
                        <tr>
                          <td align="center" style="vertical-align: middle;">
                            <center style="vertical-align: middle; color:white;">
                              TEXT
                            </center>
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>

                    </td>

                    <td class="wrapper last">

                      <table class="six columns" style="background-color: lightgray; color: white;">
                        <tr>
                          <td align="center">
                            <center>
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                            </center>
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>

                    </td>

                  </tr>
                </table>

              <!-- container end below -->
              </td>
            </tr>
          </table>

        </center>
            </td>
        </tr>
    </table>

Answer 1

CSS类就是您所需要的。如果您只是希望表格的高度相同，则只需将它们的高度设置为相同即可。无论是内联还是更容易管理的方式都是应用于它们的类，如下所示。我还将您的内联代码添加为css，因为它是一种更好的方法。

    <html>
<head>
<style type="text/css">
.tableHeight{
  height: 500px;

}

#lefttable{
  background-color: black;
  color: white;"

}

#rightTable{
  background-color: lightgray;
  color: white;
}

</style>

</head>
<body>
<table class="body">
        <tr>
            <td class="center" align="center" valign="top">
        <center>

            <table class="container">
              <tr>
                <td>

                <table class="row">
                  <tr>
                    <td class="wrapper">

                      <table id="leftTable" class="six columns tableHeight">
                        <tr>
                          <td align="center" style="vertical-align: middle;">
                            <center style="vertical-align: middle; color:white;">
                              TEXT
                            </center>
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>

                    </td>

                    <td class="wrapper last">

                      <table id="rightTable" class="six columns tableHeight">
                        <tr>
                          <td align="center">
                            <center>
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                            </center>
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>

                    </td>

                  </tr>
                </table>

              <!-- container end below -->
              </td>
            </tr>
          </table>

        </center>
            </td>
        </tr>
    </table>
    </body>
    </html>

如何使两列相同的高度 - Zurb INK

1 个答案: