Red Box
をtbody
にある修正可能なスクロール可能な高さに変換します。私は多くを検索し、複数の方法を試みましたが、私はまだそこにこだわっています。スクリーンショットはRed Box
と付けられており、コードは以下のとおりです。どうか私はこれを修正し、私の問題を整理するためにこれの例を与えることができます助けてください、ありがとう!私がお願いしたいテーブル内のtbodyの高さを固定する方法
もう一つは、どのように私は、ページの下部に水平線を削除することができます。スクリーンショットは以下のように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>
そして、ここでは上記のスニペットのスクリーンショットです:解決
[TBODY内部垂直スクロールと100%の幅を持つHTMLテーブル]の可能な重複(https://stackoverflow.com/questions/17067294/html-table-with-100-width -with-vertical-scroll-inside-tbody) – MarioZ
それは役に立たない! – Newbees