Изменение размера таблицы Высота заголовка в соответствии с другими Таблица Высота заголовка в разных div

Question

Я создал область спецификации на своей веб-странице, как я показал в этом JSFIDDLE. Я не могу понять, как мы можем сделать левый div и правый заголовок таблицы div height равными друг другу, потому что каждый раздел в заголовке таблицы заголовка левого 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

Fix стол макет:

table{ 
    table-layout: fixed; 
} 

Дайте каждой строке уникальный идентификатор

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

Там, наверное, S что-то более элегантное, чем это мне хотелось бы увидеть.

OLD ОТВЕТ

Просто объединить две таблицы в одну таблицу следующим образом:

<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