2016-06-18 65 views
0

報表包含4個表格。所有行應具有相同的高度。如何爲所有表格設置表格行高度爲固定值

我試圖從前面回答

set table row height

通過使用

.table td, .table th { 
     height: 63px; 
    } 

Howewer如果左表第二行中存在更多的行,這將被忽略。我也嘗試使用!重要並設置tr高度,但其高度仍然被忽略。

如何解決這個問題? 使用Bootstrap 3和jquery。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
    <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> 
 

 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 

 
    <style type="text/css"> 
 
    .table { 
 
     width: 100%; 
 
     margin-bottom: 0; 
 
    } 
 

 
.table td, .table th, .table tr { 
 
height: 72px; 
 
white-space: normal; 
 
word-break: break-all !important; 
 
word-wrap: break-word !important; 
 
} 
 

 
    .right td, 
 
    .right th { 
 
     width: 78px; 
 
    } 
 
    .left td, 
 
    .left th { 
 
     width: 78px; 
 
    } 
 
    .left, 
 
    .right { 
 
     float: left; 
 
     height: 450px; 
 
     box-sizing: border-box; 
 
    } 
 
    .lbody { 
 
     overflow-x: scroll; 
 
     overflow-y: hidden; 
 
     height: 400px; 
 
    } 
 
    .left .table, 
 
    .right .table { 
 
     table-layout: fixed; 
 
    } 
 
    .rbody { 
 
     overflow: scroll; 
 
     height: 400px; 
 
    } 
 
    .rheader, 
 
    .lheader { 
 
     overflow-x: hidden; 
 
     overflow-y: hidden; 
 
    } 
 
    .left { 
 
     width: 15%; 
 
     /*15%; */ 
 
    } 
 
    .right { 
 
     width: 50%; 
 
     /*85%;*/ 
 
    } 
 
    </style> 
 

 
    <script> 
 
    $(function() { 
 
     $(".lbody").on("scroll", function() { 
 
     $(".rbody").scrollTop($(this).scrollTop()); 
 
     }); 
 

 
     $(".rbody").on("scroll", function() { 
 
     $(".lbody").scrollTop($(this).scrollTop()); 
 
     }); 
 

 
     $(".rbody").on("scroll", function() { 
 
     $(".rheader").scrollLeft($(this).scrollLeft()); 
 

 
     }); 
 

 
     $(".lbody").on("scroll", function() { 
 
     $(".lheader").scrollLeft($(this).scrollLeft()); 
 

 
     }); 
 

 

 
     $('#rheader tr, #rbody tr').each(function() { 
 
     var tr = $(this); 
 
     var children = tr.children(); 
 
     $(children[0]).hide(); 
 
     $(children[1]).hide(); 
 
     }); 
 
    }); 
 
    </script> 
 

 

 
</head> 
 

 
<body> 
 
    <div class="left"> 
 
    <div class="lheader"> 
 
     <table class="table table-bordered table-striped table-condensed"> 
 
     <thead> 
 
      <tr> 
 
      <th>Kuupäev</th> 
 
      <th>Märkused</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>Viimane</td> 
 
      <td>hind</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 

 
    <div class="lbody"> 
 
     <table class="table table-bordered table-striped table-condensed table-hover"> 
 
     <tbody> 
 
      <tr> 
 
      <td>22.04.2016</td> 
 
      <td nowrap>Arve 22.04.2016,Tellimus 161813 22.04.2016</td> 
 
      </tr> 
 
      <tr> 
 
      <td>29.03.2016</td> 
 
      <td nowrap>Tellimus 161413 28.03.2016</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 

 
    <div class="right"> 
 
    <div class="rheader"> 
 
     <table class="table table-bordered table-striped table-condensed" id="rheader"> 
 
     <thead> 
 
      <tr> 
 
      <th scope="col"> 
 
       kuupaev 
 
      </th> 
 
      <th scope="col"> 
 
       m&#228;rkused 
 
      </th> 
 
      <th scope="col"> 
 
       5B2 
 
      </th> 
 
      <th scope="col"> 
 
       91in1 
 
      </th> 
 
      <th scope="col"> 
 
       AutoGreaseWhite 
 
      </th> 
 
      <th scope="col"> 
 
       BERBrake30L 
 
      </th> 
 
      <th scope="col"> 
 
       BERceramic 
 
      </th> 
 
      <th scope="col"> 
 
       BERhermeetik 
 
      </th> 
 
      <th scope="col"> 
 
       BERhss19osa 
 
      </th> 
 
      <th scope="col"> 
 
       BERklaasilapp 
 
      </th> 
 
      <th scope="col"> 
 
       BERviimlapp 
 
      </th> 
 
      <th scope="col"> 
 
       BER&#245;lilapid50tk 
 
      </th> 
 
      <th scope="col"> 
 
       BRNsoftLapp 
 
      </th> 
 
      <th scope="col"> 
 
       Etch16ml 
 
      </th> 
 
      <th scope="col"> 
 
       Heebel 
 
      </th> 
 
      <th scope="col"> 
 
       HSS6.0 
 
      </th> 
 
      <th scope="col"> 
 
       HSS8.0 
 
      </th> 
 
      <th scope="col"> 
 
       HST12S 
 
      </th> 
 
      <th scope="col"> 
 
       HSTClear12mm 
 
      </th> 
 
      <th scope="col"> 
 
       KD-400 
 
      </th> 
 
      <th scope="col"> 
 
       KENTseep3L 
 
      </th> 
 
      <th scope="col"> 
 
       Laadija 
 
      </th> 
 
      <th scope="col"> 
 
       LiimGel 
 
      </th> 
 
      <th scope="col"> 
 
       LiimVedel 
 
      </th> 
 
      <th scope="col"> 
 
       NAPFC 
 
      </th> 
 
      <th scope="col"> 
 
       Piliiatslamp 
 
      </th> 
 
      <th scope="col"> 
 
       PlazTex 
 
      </th> 
 
      <th scope="col"> 
 
       PPDG 
 
      </th> 
 
      <th scope="col"> 
 
       PSG-Skang 
 
      </th> 
 
      <th scope="col"> 
 
       PTFE+ 
 
      </th> 
 
      <th scope="col"> 
 
       SDL 
 
      </th> 
 
      <th scope="col"> 
 
       ShowrGlaz 
 
      </th> 
 
      <th scope="col"> 
 
       SOS 
 
      </th> 
 
      <th scope="col"> 
 
       Speedy500 
 
      </th> 
 
      <th scope="col"> 
 
       SRA 
 
      </th> 
 
      <th scope="col"> 
 
       SRP 
 
      </th> 
 
      <th scope="col"> 
 
       SWG3 
 
      </th> 
 
      <th scope="col"> 
 
       TyreDress 
 
      </th> 
 
      <th scope="col"> 
 
       USBjuhe 
 
      </th> 
 
      <th scope="col"> 
 
       Veljepuhasti 
 
      </th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td></td> 
 
      <td>Viimane hind</td> 
 
      <td>20,05000</td> 
 
      <td>8,50000</td> 
 
      <td>5,70000</td> 
 
      <td>60,00000</td> 
 
      <td>5,00000</td> 
 
      <td>8,35000</td> 
 
      <td>30,00000</td> 
 
      <td>1,60000</td> 
 
      <td>1,40000</td> 
 
      <td>25,00000</td> 
 
      <td>2,30000</td> 
 
      <td>4,50000</td> 
 
      <td>2,55000</td> 
 
      <td>5,60000</td> 
 
      <td>6,70000</td> 
 
      <td>9,31000</td> 
 
      <td>11,00000</td> 
 
      <td>4,30000</td> 
 
      <td>18,00000</td> 
 
      <td>4,50000</td> 
 
      <td>8,00000</td> 
 
      <td>7,50000</td> 
 
      <td>0,00000</td> 
 
      <td>0,00000</td> 
 
      <td>9,85000</td> 
 
      <td>9,30000</td> 
 
      <td>16,50000</td> 
 
      <td>9,15000</td> 
 
      <td>0,00000</td> 
 
      <td>21,35000</td> 
 
      <td>7,20000</td> 
 
      <td>11,70000</td> 
 
      <td>8,50000</td> 
 
      <td>0,00000</td> 
 
      <td>5,70000</td> 
 
      <td>7,55000</td> 
 
      <td>1,50000</td> 
 
      <td>19,00000</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 

 
    </div> 
 

 
    <div class="rbody"> 
 
     <table class="table table-bordered table-striped table-condensed table-hover" id="rbody"> 
 
     <tbody> 
 
      <tr> 
 
      <td>22.04.2016 0:00.00</td> 
 
      <td>Arve 22.04.2016,Tellimus 161813 22.04.2016</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>6,0000</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      </tr> 
 
      <tr> 
 
      <td>29.03.2016 0:00.00</td> 
 
      <td>Tellimus 161413 28.03.2016</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>1,0000</td> 
 
      <td>4,0000</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>1,0000</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>1,0000</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>3,0000</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      </tr> 
 
      <tr> 
 
      <td>28.03.2016 0:00.00</td> 
 
      <td>Arve 29.03.2016</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>1,0000</td> 
 
      <td>4,0000</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>1,0000</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>1,0000</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>3,0000</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 

 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

+0

PS:你不需要'類型= 「文/ CSS」'。 – gcampbell

回答

1

添加股利每TDS和把內容div來實現這裏面......

.table td, .table th, .table tr,.table div{ 
    height: 63px !important; 
} 
+0

我試過了,但問題依然存在。 – Andrus

+0

@安德魯斯:把你的內容放在div中,並將隱藏溢出,並設置div的高度... –

+0

有4個表格。 div應該添加在每個td和th元素的每個表裏面嗎? – Andrus

0
.table td, .table th, .table tr { 
    height: 72px; 
    white-space: normal; 
    word-break: break-all !important; 
    word-wrap: break-word !important; 
} 

請儘量it.Add屬性和調整高度。

或者

.table td, .table th, .table tr { 
    height: 72px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
+0

我將此代碼片段添加到答案中,但問題仍然存在。瀏覽器仍然使用更大的行高。你用這段代碼試過了嗎? – Andrus

+0

我沒有嘗試過,但確定使用這兩個屬性空白:正常;和斷字:破解所有!重要的;單詞包裝:斷字!重要的; – iyyappan

+0

或嘗試新編輯。點擊進入流程.. – iyyappan

相關問題