logo标签列表

如何固定表格tbody的高度

htmlcsstwitter-bootstrap
3
我希望将此红色框转换为固定的可滚动高度，该高度位于tbody中。我搜索了很多并尝试了多种方法，但仍然卡在那里。屏幕截图附在红色框下面，代码如下。请告诉我如何解决这个问题，并给我一个例子，谢谢！

Red Box

还有一件事我想问，如何删除页面底部的水平线。屏幕截图如下，名为水平线。 

    <!doctype html>
    <html>
    
    <head>
     <html>
    
     <head>
      <meta charset="utf-8">
      <title>ISSUE</title>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
      <!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
      <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     </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>
           <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>
      
    
     </body>
    
     </html>

And here is a screenshot of the above snippet:

enter image description here

可能是HTML表格的重复问题，带有垂直滚动条在tbody内。 - MarioZ
不，先生，这并没有帮助！ - Newbees
2个回答
2

问题一

有很多种方法可以解决问题，但我发现这种方法更加有效。希望对你有所帮助。

可以垂直滚动

<!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>

这是您要找的吗？ - Dhaval Jardosh
先生，我想要制作可滚动的 tbody。 - Newbees
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接