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

Resize Table Header height according to other Table Header height in different div

本文关键字：表头 高度 其他 调整 分区      更新时间：2023-09-26

我在网页上创建了一个规范区域，就像我在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>

新答案

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());

也许还有比这更优雅的东西，我很想看到。

旧答案

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

<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

相关文章：