0

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

在此处输入图像描述

有一种解决方法是在表格宽度高度 100% 附近添加 div 并显示：内联块，但这是一个丑陋的 hack。

有谁知道解决方案？

<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>
4

1 回答 1

0

CSS class is what you need. If you are just wanting the tables to be the same height just set the height for them both as the same. either in-line or in a much easier way to manage is as a class applied to them both as below. I also added your in-line code as css as its a far better approach.

    <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>
于 2014-08-08T14:58:47.160 回答