html - 直接滚动条到表格(不是正文元素)+更多

标签 html css html-table scrollbar

.html 和 .css 下面。我有一张固定高度的 table 。最后一行没有显示这个高度，我必须向下滚动。那是故意的。我希望将滚动条直接放在表格的右侧，页脚应该显示出来而无需先向下滚动，而且我希望看到页脚左侧的元素，不仅在第一列而且在尽可能多的列。谁能帮忙；更正我的 css/html？

    .jqcTable {
      border        : 1px solid rgba(204,204,204,0.8);
      border-collapse: collapse;
      font-family    : Arial; 
      font-size      : 10pt;
      margin: 0; 
      padding: 0;
    } 

    .jqcTable td {
      border      : 1px solid rgba(204,204,204,0.8);
    }


.jqcTable tfoot td div { border-top: 1px solid #8C8C8C;background: #EBEBEB;} 
.jqcTable tfoot td { padding: 0; font-size: 12px; float : left; } 
.jqcTable tfoot td div{ padding: 2px; }
.jqcTable tfoot td ul {margin: 0; 
                      padding:0; 
                      list-style: none; 
                      text-align: right; 
                      }
.jqcTable tfoot li { display: inline; }
.jqcTable tfoot li a { text-decoration: none; 
                      display: inline-block;  
                      padding: 2px 8px; 
                      margin: 1px;
                      color: #F5F5F5;
                      border: 1px solid #8C8C8C;
                      -webkit-border-radius: 3px; 
                      -moz-border-radius: 3px; 
                      border-radius: 3px; 
                      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8C8C8C), color-stop(1, #7D7D7D) );
                      background:-moz-linear-gradient( center top, #8C8C8C 5%, #7D7D7D 100% );
                      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#7D7D7D');
                      background-color:#8C8C8C; 
                      }
.jqcTable tfoot ul.active, .jqcTable tfoot ul a:hover { 
                      text-decoration: none;
                      border-color: #7D7D7D; 
                      color: #F5F5F5; 
                      background: none; 
                      background-color:#8C8C8C;
                      }


    .jqcTable tr {
        border:solid 1px #BBD9EE;
        padding: 0.3em;
        caption: 0.3em; 
    }

    .jqcTable th {
        background: #eee;
    }

    .tableHolder {
        margin: 0; padding: 0; overflow-y: auto; // width : 50%; of 600px // plaatst scrolbar naar links, maar tever van table
    } 

    .EditableCell {
      -webkit-box-shadow: inset 0 0 6px #5d4301;
      box-shadow: inset 0 0 6px #5d4301;
    }  

.MaintainButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
    -webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
    box-shadow:inset 0px 1px 0px 0px #fff6af;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
    background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
    background-color:#ffec00;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #ffaa22;
    display:inline-block;
    cursor:pointer;
    color:#333333;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffee66;
        width:100px;
}
.MaintainButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
    background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
    background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
    background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
    background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
    background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
    background-color:#ffab23;
}
.MaintainButton:active {
    position:relative;
    top:1px;
}  
<html>
  <head>
    <link href="jqc-all.css" rel="stylesheet" type="text/css">
  </head>
  <body spellcheck="false">
    <span id="customerDataModel" jqc-type="jqcDataModel"></span>
    <div class="tableHolder" style="max-height: 525px">
      <table id="taskTable" jqc-type="jqcTable" class="jqcTable">
        <thead>
          <tr>
            <th>Number</th>
            <th>Name</th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="4">
              <div id="paging">
                <ul>
                  <li>
                    <a href="#">
                      <span>Previous</span>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="active">
                      <span>1</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <span>2</span>
                   </a>
                  </li>
                  <li>
                    <a href="#">
                      <span>3</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <span>4</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <span>5</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                       <span>Next</span>
                    </a>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
        </tfoot>
      <tbody>
        <tr>
          <td width="100px">1</td>
          <td width="300px">Lift Tours</td>
          <td id="cellRow=0,cellColumn=2"><input type="button" class="EditButton   MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
          <td id="cellRow=0,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
        </tr>
        <tr>
          <td width="100px">2</td>
          <td width="300px">Urpon Frisbee</td>
          <td id="cellRow=1,cellColumn=2"><input type="button" class="EditButton   MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
          <td id="cellRow=1,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
       </tr>
       <tr>
         <td width="100px">3</td>
         <td width="300px">Hoops </td>
         <td id="cellRow=2,cellColumn=2"><input type="button" class="EditButton   MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
         <td id="cellRow=2,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
       </tr>
       <tr>
         <td width="100px">4</td>
         <td width="300px">Go Fishing Ltd</td>
         <td id="cellRow=3,cellColumn=2"><input type="button" class="EditButton   MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
         <td id="cellRow=3,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
       </tr>
       <tr>
         <td width="100px">5</td>
         <td width="300px">Match Point Tennis</td>
         <td id="cellRow=4,cellColumn=2"><input type="button" class="EditButton   MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
         <td id="cellRow=4,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
       </tr>
       <tr>
         <td width="100px">6</td>
         <td width="300px">Fanatical Athletes</td>
         <td id="cellRow=5,cellColumn=2"><input type="button" class="EditButton   MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
         <td id="cellRow=5,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>       
       </tr>
       <tr>
         <td width="100px">7</td>
         <td width="300px">Aerobics valine Ky</td>
         <td id="cellRow=6,cellColumn=2"><input type="button" class="EditButton   MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
         <td id="cellRow=6,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
       </tr>
       <tr> 
         <td width="100px">8</td>
         <td width="300px">Game Set Match</td>
         <td id="cellRow=7,cellColumn=2"><input type="button" class="EditButton   MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
         <td id="cellRow=7,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
       </tr>
       <tr>
         <td width="100px">9</td>
         <td width="300px">Pihtiputaan Pyora</td>
         <td id="cellRow=8,cellColumn=2"><input type="button" class="EditButton   MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
         <td id="cellRow=8,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
       </tr>
       <tr><td width="100px">10</td>
         <td width="300px">Just Joggers Limited</td>
         <td id="cellRow=9,cellColumn=2"><input type="button" class="EditButton   MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
         <td id="cellRow=9,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
       </tr>
       <tr>
         <td width="100px">11</td>
         <td width="300px">Keilailu ja Biljardi</td>
         <td id="cellRow=10,cellColumn=2"><input type="button" class="EditButton   MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
         <td id="cellRow=10,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
       </tr>
       <tr>
         <td width="100px">12</td>
         <td width="300px">Surf Lautaveikkoset</td>
         <td id="cellRow=11,cellColumn=2"><input type="button" class="EditButton   MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
         <td id="cellRow=11,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
       </tr>
       <tr>
         <td width="100px">13</td>
         <td width="300px">Biljardi ja tennis</td>
         <td id="cellRow=12,cellColumn=2"><input type="button" class="EditButton   MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
         <td id="cellRow=12,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
       </tr>
       <tr>
         <td width="100px">14</td>
         <td width="300px">Paris St Germain</td>
         <td id="cellRow=13,cellColumn=2"><input type="button" class="EditButton   MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
         <td id="cellRow=13,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
       </tr>
       <tr>
         <td width="100px">15</td>
         <td width="300px">Hoopla Basketball</td>
         <td id="cellRow=14,cellColumn=2"><input type="button" class="EditButton   MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
         <td id="cellRow=14,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
       </tr>
       <tr>
         <td width="100px">16</td>
         <td width="300px">Thundering Surf Inc.</td>
         <td id="cellRow=15,cellColumn=2"><input type="button" class="EditButton   MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
         <td id="cellRow=15,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
       </tr>

       </tbody>
     </table>
    </div>
  </body>
</html>

最佳答案

这个小图书馆帮助了:https://github.com/nheldman/jquery.scrollTableBody .剩下的唯一问题是:“我希望在页脚中看到左侧的元素，不仅在第一列中，而且还需要尽可能多的列。”

关于html - 直接滚动条到表格(不是正文元素)+更多，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28011399/

上一篇：css - 滚动 `<ul>` 动画

下一篇：php - 自定义 WordPress 主题中的 CSS 折叠布局和神秘边距

相关文章：

javascript - 基于背景颜色的倒置 Logo

javascript - 在不同的div中显示不同的网页

javascript - 如何使用jquery下载文件？

javascript - 表单 POST 未显示在 Controller 中

css - WordPress 网站只加载一些 CSS

css - 为什么 IONIC Tabs 导航栏出现在子页面中？

html - margin 底部不适用于 table

javascript - 我怎样才能使用纯 Javascript 而不使用插件来简单地卡住表格的第一行？

javascript - 如何在维护顺序元素 ID 的同时添加和删除表行？

javascript - 控制 HTML 表单文本区域中的图像上传大小

©2024 IT工具网  联系我们