Question

我在网页上创建了一个规范区域，就像我在 JSFIDDLE 中显示的那样。我无法理解我们如何使左div和右div表头高度彼此相等，因为左div的表头高度中的每个部分可能因插入右div中的字符而不同表头。代码如下：

#maindiv {
    float:left;
    width:100%;
    height:565px;
    color:Black;
}
#leftdiv {
    border:1px solid black;
    margin-top:0px;
    margin-left:5px;
    float:left;
    height:100%;
    width:30%;
    -webkit-box-flex:1;
}
#leftdiv table {
    padding:5px;
    font-size:22px;
}
#rightdiv {
    border:1px solid black;
    margin-top:0px;
    float:left;
    height:100%;
    width:67%;
    -webkit-box-flex:1;
}
#rightdiv table {
    padding:5px;
    font-size:22px;
}

<div id="maindiv">
    <div id="leftdiv">
        <table align="center" border="1">
            <tr>
                <th>Product Name</th>
            </tr>
            <tr>
                <th>Size Available</th>
            </tr>
            <tr>
                <th>Color Available</th>
            </tr>
            <tr>
                <th>Product Description</th>
            </tr>
            <tr>
                <th>Availability</th>
            </tr>
        </table>
    </div>
    <div id="rightdiv">
         <table align="left" border="1">
            <tr>
                <th>Cell Phone</th>
            </tr>
            <tr>
                <th>5.5,6.5</th>
                </tr>
            <tr>
                <th>White, Red, Black, Silver, Gold</th>
            </tr>
            <tr>
                <th>QWERTY Soft Keyboard (Google Keyboard and Swiftkey Pre-loaded), USB OTG Support, 24 Languages Support, Wi-Fi Direct, WLAN Support, Games, Vibrant</th>
            </tr>
            <tr>
                <th>This product is not out of stock.</th>
            </tr>
        </table>
    </div>
</div>

Answer 1

新答案

OP已经指定他不能只制作一张桌子。

如何使用JQuery来匹配高度。丑陋但它有效（我的生活故事）。

JSFiddle

修复表格布局：

table{
  table-layout: fixed;
}

为每一行指定唯一ID

<table align="center" border="1">
  <tr>
    <th id="leftrow1">Product Name</th>
  </tr>
  <tr>
    <th id="leftrow2">Size Available</th>
  </tr>
  <tr>
    <th id="leftrow3">Color Available</th>
  </tr>
  <tr>
    <th id="leftrow4">Product Description</th>
  </tr>
  <tr>
    <th id="leftrow5">Availability</th>
  </tr>
</table>

匹配它们：

$("#leftrow1").height($("#rightrow1").height());
$("#leftrow2").height($("#rightrow2").height());
$("#leftrow3").height($("#rightrow3").height());
$("#leftrow4").height($("#rightrow4").height());
$("#leftrow5").height($("#rightrow5").height());

我可能会看到一些比这更优雅的东西。

OLD ANSWER

将两个表合并为一个表，如下所示：

<table align="center" border="1">
  <tr>
    <th>Product Name</th>
    <td>Cell Phone<</td>
  </tr>
  <tr>
    <th>Size Available</th>
    <td>5.5,6.5</td>
  </tr>
  <tr>
    <th>Color Available</th>
    <td>White, Red, Black, Silver, Gold</td>
  </tr>
  <tr>
    <th>Product Description</th>
    <td>QWERTY Soft Keyboard (Google Keyboard and Swiftkey Pre-loaded), USB OTG Support, 24 Languages Support, Wi-Fi Direct, WLAN Support, Games, Vibrant</td>
  </tr>
  <tr>
    <th>Availability</th>
    <td>This product is not out of stock.</td>
  </tr>
</table>

JSFIDDLE

根据不同div中的其他表头高度调整表头高度

1 个答案: