2017-10-01 31 views
3

Red Boxtbodyにある修正可能なスクロール可能な高さに変換します。私は多くを検索し、複数の方法を試みましたが、私はまだそこにこだわっています。スクリーンショットはRed Boxと付けられており、コードは以下のとおりです。どうか私はこれを修正し、私の問題を整理するためにこれの例を与えることができます助けてください、ありがとう!私がお願いしたいテーブル内のtbodyの高さを固定する方法

Red Box

もう一つは、どのように私は、ページの下部に水平線を削除することができます。スクリーンショットは以下のようにHorizontal Lineと命名されています。

<!doctype html> 
 
    <html> 
 
    
 
    <head> 
 
    \t <html> 
 
    
 
    \t <head> 
 
    \t \t <meta charset="utf-8"> 
 
    \t \t <title>ISSUE</title> 
 
    \t \t <!-- Latest compiled and minified CSS --> 
 
    \t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    
 
    \t \t <!-- jQuery library --> 
 
    \t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    
 
    \t \t <!-- Latest compiled JavaScript --> 
 
    \t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    \t </head> 
 
    
 
    \t <body style="background-color: #e3e3e3;"> 
 
    \t \t <div class="row"> 
 
    \t \t \t <div class="container" style="background-color: #efefef;box-shadow: 2px 2px 1px 1px ;"> 
 
    \t \t \t \t <div class="col-md-11" style="background-color: brown"> 
 
    \t \t \t \t \t <center> 
 
    \t \t \t \t \t \t <h2 style="line-height: 60 px;color: white;">ISSUE</h2> 
 
    \t \t \t \t \t </center> 
 
    \t \t \t \t </div> 
 
    \t \t \t \t <div class="col-md-1"> 
 
    \t \t \t \t \t <a href="logout.php">ABCDEF</a> 
 
    \t \t \t \t </div> 
 
    \t \t \t \t <div class="col-md-2" style="background-color: pink; box-shadow: 0px 1px 0px 1px"> 
 
    \t \t \t \t \t one<br> two 
 
    \t \t \t \t \t <br> three 
 
    \t \t \t \t \t <br> four 
 
    \t \t \t \t \t <br> one 
 
    \t \t \t \t \t <br> two 
 
    \t \t \t \t \t <br> three 
 
    \t \t \t \t \t <br> four 
 
    \t \t \t \t \t <br> one 
 
    \t \t \t \t \t <br> two 
 
    \t \t \t \t \t <br> three 
 
    \t \t \t \t \t <br> four 
 
    \t \t \t \t \t <br> one 
 
    \t \t \t \t \t <br> two 
 
    \t \t \t \t \t <br> three 
 
    \t \t \t \t \t <br> four 
 
    \t \t \t \t \t <br> one 
 
    \t \t \t \t \t <br> two 
 
    \t \t \t \t \t <br> three 
 
    \t \t \t \t \t <br> four 
 
    \t \t \t \t \t <br> one 
 
    \t \t \t \t \t <br> two 
 
    \t \t \t \t \t <br> three 
 
    \t \t \t \t \t <br> four 
 
    \t \t \t \t \t <br> one 
 
    \t \t \t \t \t <br> two 
 
    \t \t \t \t \t <br> three 
 
    \t \t \t \t </div> 
 
    \t \t \t \t <div class="col-md-9"> 
 
    
 
    \t \t \t \t \t <div class="col-md-6"> 
 
    \t \t \t \t \t \t <br> 
 
    \t \t \t \t \t \t <label>Enter Country Name</label> 
 
    \t \t \t \t \t \t <input type="text" name="country" id="country" style="width:200px; margin-right: 0;"/> 
 
    \t \t \t \t \t \t <div id="countryList"></div> 
 
    \t \t \t \t \t </div> 
 
    \t \t \t \t \t <div class="col-md-6"> 
 
    \t \t \t \t \t \t <table class="table"> 
 
    \t \t \t \t \t \t \t <center> 
 
    \t \t \t \t \t \t \t \t <h2>BALANCE THIS</h2> 
 
    \t \t \t \t \t \t \t </center> 
 
    \t \t \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t \t \t <td> 
 
    \t \t \t \t \t \t \t \t \t <label>Inovice No. </label> 
 
    \t \t \t \t \t \t \t \t \t 
 
    \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t <td> 
 
    \t \t \t \t \t \t \t \t \t <label>User Name</label> 
 
    \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t </tr> 
 
    \t \t \t \t \t \t </table> 
 
    \t \t \t \t \t \t <table class="table table-bordered table-hover"> 
 
    \t \t \t \t \t \t \t <thead> 
 
    \t \t \t \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t \t \t \t <th>AAAA</th> 
 
    \t \t \t \t \t \t \t \t \t <th>BBBB</th> 
 
    \t \t \t \t \t \t \t \t \t <th> CCCC </th> 
 
    \t \t \t \t \t \t \t \t \t <th>DDDD</th> 
 
    \t \t \t \t \t \t \t \t \t <th>EEEE</th> 
 
    \t \t \t \t \t \t \t \t </tr> 
 
    \t \t \t \t \t \t \t </thead> 
 
    \t \t \t \t \t \t \t <tbody class="details"> 
 
    \t \t \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t \t <td> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t A<br> 
 
    \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t </tr> 
 
    \t \t \t \t \t \t \t </tbody> 
 
    \t \t \t \t \t \t \t <tfoot> 
 
    \t \t \t \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t \t \t \t <td> 
 
    \t \t \t \t \t \t \t \t \t \t ZZZ : <input type="text" name="ZZZ" class="form-control subtotal"> XXX : <input type="text" name="XXX" class="form-control pay"> YYY : <input type="text" name="YYY" class="form-control payback"> 
 
    \t \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t </tr> 
 
    \t \t \t \t \t \t \t </tfoot> 
 
    \t \t \t \t \t \t </table> 
 
    \t \t \t \t \t \t <input type="submit" value="Confirm" class="btn btn-primary"> 
 
    \t \t \t \t \t </div> 
 
    
 
    \t \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t \t 
 
    
 
    \t </body> 
 
    
 
    \t </html>

そして、ここでは上記のスニペットのスクリーンショットです:解決

enter image description here

+0

[TBODY内部垂直スクロールと100%の幅を持つHTMLテーブル]の可能な重複(https://stackoverflow.com/questions/17067294/html-table-with-100-width -with-vertical-scroll-inside-tbody) – MarioZ

+0

それは役に立たない! – Newbees

答えて

2

PROBLEM ONE

あり整理するソリューションの数があるが、私はこの1つはより有用であるmehtodました。これがあなたに役立つことを願っています。

Vertical Scrollable

<!doctype html> 
<html> 

<head> 
    <html> 

    <head> 
     <meta charset="utf-8"> 
     <title>ISSUE</title> 

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 


     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 


     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <style> 
      .table-fixed thead { 
       width: 100%; 
      } 

      .table-fixed tbody { 
       height: 230px; 
       overflow-y: auto; 
       width: 100%; 
      } 

      .table-fixed thead, 
      .table-fixed tbody, 
      .table-fixed tr, 
      .table-fixed td, 
      .table-fixed th { 
       display: block; 
      } 

      .table-fixed tbody td, 
      .table-fixed thead> tr> th { 
       float: left; 
       border-bottom-width: 0; 
      } 
     </style> 



    </head> 

    <body style="background-color: #e3e3e3;"> 
     <div class="row"> 
      <div class="container" style="background-color: #efefef;box-shadow: 2px 2px 1px 1px ;"> 
       <div class="col-md-11" style="background-color: brown"> 
        <center> 
         <h2 style="line-height: 60 px;color: white;">ISSUE</h2> 
        </center> 
       </div> 
       <div class="col-md-1"> 
        <a href="logout.php">ABCDEF</a> 
       </div> 
       <div class="col-md-2" style="background-color: pink; box-shadow: 0px 1px 0px 1px"> 
        one<br> two 
        <br> three 
        <br> four 
        <br> one 
        <br> two 
        <br> three 
        <br> four 
        <br> one 
        <br> two 
        <br> three 
        <br> four 
        <br> one 
        <br> two 
        <br> three 
        <br> four 
        <br> one 
        <br> two 
        <br> three 
        <br> four 
        <br> one 
        <br> two 
        <br> three 
        <br> four 
        <br> one 
        <br> two 
        <br> three 
       </div> 
       <div class="col-md-9"> 

        <div class="col-md-6"> 
         <br> 
         <label>Enter Country Name</label> 
         <input type="text" name="country" id="country" style="width:200px; margin-right: 0;"/> 
         <div id="countryList"></div> 
        </div> 
        <div class="col-md-6"> 
         <table class="table"> 
          <center> 
           <h2>BALANCE THIS</h2> 
          </center> 

         </table> 
         <table class="table table-fixed"> 
          <thead> 
           <tr> 
            <th class="col-xs-2">AAAA</th> 
            <th class="col-xs-2">BBBB</th> 
            <th class="col-xs-2">CCCC</th> 
            <th class="col-xs-2">DDDD</th> 
            <th class="col-xs-4">EEEE</th> 
           </tr> 
          </thead> 
          <tbody class="details"> 
           <tr> 
            <td class="col-xs-2">A</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">B</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">C</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">D</td> 
           </tr> 
           <tr> 
            <td class="col-xs-4">E</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">A</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">B</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">C</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">D</td> 
           </tr> 
           <tr> 
            <td class="col-xs-4">E</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">A</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">B</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">C</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">D</td> 
           </tr> 
           <tr> 
            <td class="col-xs-4">E</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">A</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">B</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">C</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">D</td> 
           </tr> 
           <tr> 
            <td class="col-xs-4">E</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">A</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">B</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">C</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">D</td> 
           </tr> 
           <tr> 
            <td class="col-xs-4">E</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">A</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">B</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">C</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">D</td> 
           </tr> 
           <tr> 
            <td class="col-xs-4">E</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">A</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">B</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">C</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">D</td> 
           </tr> 
           <tr> 
            <td class="col-xs-4">E</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">A</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">B</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">C</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">D</td> 
           </tr> 
           <tr> 
            <td class="col-xs-4">E</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">A</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">B</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">C</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">D</td> 
           </tr> 
           <tr> 
            <td class="col-xs-4">E</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">A</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">B</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">C</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">D</td> 
           </tr> 
           <tr> 
            <td class="col-xs-4">E</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">A</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">B</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">C</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">D</td> 
           </tr> 
           <tr> 
            <td class="col-xs-4">E</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">A</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">B</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">C</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">D</td> 
           </tr> 
           <tr> 
            <td class="col-xs-4">E</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">A</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">B</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">C</td> 
           </tr> 
           <tr> 
            <td class="col-xs-2">D</td> 
           </tr> 
           <tr> 
            <td class="col-xs-4">E</td> 
           </tr> 
          </tbody> 
          <tfoot> 
           <tr> 
            <td> 
             ZZZ : <input type="text" name="ZZZ" class="form-control subtotal"> XXX : <input type="text" name="XXX" class="form-control pay"> YYY : <input type="text" name="YYY" class="form-control payback"> 
            </td> 
           </tr> 
          </tfoot> 
         </table> 
         <input type="submit" value="Confirm" class="btn btn-primary"> 
        </div> 

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


    </body> 

    </html> 
0

問題1:フルストレッチに

コンテナ幅。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<body style="background-color: #e3e3e3;"> 
 
    <div class="container" style="background-color: #efefef;box-shadow: 2px 2px 1px 1px ;"> 
 
    <div class="row"> 
 

 
     <div class="col-md-11" style="background-color: brown"> 
 
     <center> 
 
      <h2 style="line-height: 60 px;color: white;">ISSUE</h2> 
 
     </center> 
 
     </div> 
 
     <div class="col-md-1"> 
 
     <a href="logout.php">ABCDEF</a> 
 
     </div> 
 
     <div class="col-md-2" style="background-color: pink; box-shadow: 0px 1px 0px 1px"> 
 
     one<br> two 
 
     <br> three 
 
     <br> four 
 
     <br> one 
 
     <br> two 
 
     <br> three 
 
     <br> four 
 
     <br> one 
 
     <br> two 
 
     <br> three 
 
     <br> four 
 
     <br> one 
 
     <br> two 
 
     <br> three 
 
     <br> four 
 
     <br> one 
 
     <br> two 
 
     <br> three 
 
     <br> four 
 
     <br> one 
 
     <br> two 
 
     <br> three 
 
     <br> four 
 
     <br> one 
 
     <br> two 
 
     <br> three 
 
     </div> 
 
     <div class="col-md-9"> 
 

 
     <div class="col-md-6"> 
 
      <br> 
 
      <label>Enter Country Name</label> 
 
      <input type="text" name="country" id="country" style="width:200px; margin-right: 0;" /> 
 
      <div id="countryList"></div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <table class="table"> 
 
      <center> 
 
       <h2>BALANCE THIS</h2> 
 
      </center> 
 
      <tr> 
 
       <td> 
 
       <label>Inovice No. </label> 
 

 
       </td> 
 
       <td> 
 
       <label>User Name</label> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
      <table class="table table-bordered table-hover"> 
 
      <thead> 
 
       <tr> 
 
       <th>AAAA</th> 
 
       <th>BBBB</th> 
 
       <th> CCCC </th> 
 
       <th>DDDD</th> 
 
       <th>EEEE</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody class="details"> 
 
       <tr> 
 
       <td> 
 
        A<br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> A 
 
        <br> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      <tfoot> 
 
       <tr> 
 
       <td> 
 
        ZZZ : <input type="text" name="ZZZ" class="form-control subtotal"> XXX : <input type="text" name="XXX" class="form-control pay"> YYY : <input type="text" name="YYY" class="form-control payback"> 
 
       </td> 
 
       </tr> 
 
      </tfoot> 
 
      </table> 
 
      <input type="submit" value="Confirm" class="btn btn-primary"> 
 
     </div> 
 

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

+0

これはあなたが探しているものですか? –

+0

私はスクロール可能な 'tbody'を作成したい – Newbees

+0

それに取り組んで.. –

関連する問題