添加水平滚动表

时间：2017-06-21 06:43:25

标签： jquery html css html5

我创建了一个简单的HTML表，其中预定义了一些数据，但我想在此表中添加一个水平滚动，其中Top Row（Name，Title）将始终固定。但是如何添加水平滚动？

＆＃13;
＆＃13; 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<table width="200" border="1">
  <tr>
    <td><b>Name</b></td>
    <td><b>Title</b></td>
  </tr>
  <tr>
    <td>Atish</td>
    <td>kumar</td>
  </tr>
  <tr>
    <td>Sandip</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Rohit</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Atul</td>
    <td>Sharma</td>
  </tr>
  <tr>
    <td>Moumita</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Nirmal</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Susmita</td>
    <td>Chatterjee</td>
  </tr>
  <tr>
    <td>Sekhar</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Gour</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Jotin</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Shyam</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Dipak</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Partha</td>
    <td>Sen</td>
  </tr>
</table>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

尝试使用css

＆＃13;
＆＃13; 
.scrollableTable {
  width: 100%;
}
.scrollableTable thead {
  display: block;
}
.scrollableTable thead th:nth-child(1) {
  width: 30%;
}
.scrollableTable thead th:nth-child(2) {
  width: 30%;
}
.scrollableTable tbody {
  display: block;
  overflow-y: scroll;
  width: 100%;
  height: 200px;
}
.scrollableTable tbody tr {
  display: block;
  width: 100%;
}
.scrollableTable tbody tr td {
  display: inline-block;
}
.scrollableTable tbody tr td:nth-child(1) {
  /* Calculate ((100% - scrollbar width) * ( % / 100)) to get proper column percent */
  width: calc((100% - 11px) * (20 / 100));
}
.scrollableTable tbody tr td:nth-child(2) {
  /* Calculate ((100% - scrollbar width) * ( % / 100)) to get proper column percent */
  width: calc((100% - 11px) * (80 / 100));
}
＆＃13; 
<table class="scrollableTable">
    <thead>
         <tr>
    <th><b>Name</b></th>
    <th><b>Title</b></th>
  </tr>
    </thead>
    <tbody>
         <tr>
    <td>Atish</td>
    <td>kumar</td>
  </tr>
  <tr>
    <td>Sandip</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Rohit</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Atul</td>
    <td>Sharma</td>
  </tr>
  <tr>
    <td>Moumita</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Nirmal</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Susmita</td>
    <td>Chatterjee</td>
  </tr>
  <tr>
    <td>Sekhar</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Gour</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Jotin</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Shyam</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Dipak</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Partha</td>
    <td>Sen</td>
  </tr>
    </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

横向滚动

＆＃13;
＆＃13; 
.table-wrapper { 
    overflow-x:scroll;
    overflow-y:visible;
    width:250px;
    margin-left: 120px;
}


td, th {
    padding: 5px 20px;
    width: 100px;
}

th:first-child {
    position: fixed;
    left: 5px
}
＆＃13; 
<div class="table-wrapper">
    <table id="consumption-data" class="data">
        <thead class="header">
              <tr>
    <th><b>Name</b></th>
     <td>Atish</td>
     <td>Sandip</td>
     <td>Rohit</td>
     <td>Atul</td>
     <td>Moumita</td>
      <td>Nirmal</td>
      <td>Susmita</td>
       <td>Sekhar</td>
        <td>Gour</td>
        <td>Jotin</td>
        <td>Shyam</td>
        <td>Dipak</td>
        <td>Partha</td>
  </tr>
        </thead>
        <tbody class="results">
            <tr>
                <th>Title</th>
                <td>kumar</td>
               <td>Das</td>
                <td>Sen</td>
               <td>Sharma</td>
                <td>Sen</td>
               <td>Roy</td>
                <td>Chatterjee</td>
               <td>Das</td>
                <td>Sen</td>
               <td>Roy</td>
                <td>Das</td>
               <td>Das</td>
                <td>Sen</td>
            </tr>
        </tbody>
    </table>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

添加overflow-x以获取水平滚动到内部表格。希望这能解决你的问题。

＆＃13;
＆＃13; 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>

<table cellspacing="0" cellpadding="0" border="0" width="320">
<td>
   <div style="width:320px; height:auto; overflow-x: scroll;">
     <table cellspacing="0" cellpadding="1" border="1" width="300" >
	 <tr>
        <th>Name</th>
        <th>Title</th>
     </tr>
    <tr>
    <td>Atish</td>
    <td>kumar</td>
  </tr>
  <tr>
    <td>Sandip23432423423423423423423423423423423</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Rohit</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Atul</td>
    <td>Sharma</td>
  </tr>
  <tr>
    <td>Moumita</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Nirmal</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Susmita</td>
    <td>Chatterjee</td>
  </tr>
  <tr>
    <td>Sekhar</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Gour</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Jotin</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Shyam</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Dipak</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Partha</td>
    <td>Sen</td>
  </tr>  
     </table>  
   </div>
  </td>
 </tr>
</table>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

尝试这一点，在所有浏览器中测试并使用最少的更改（主要是滚动条的宽度）：

<html>
<head><title>Fixed Grid</title></head>
<body>


<div id="main-container">
<div style="padding-right: 16px; background-color: #E9E9E9;
    border-top: 1px solid #ccc; border-right: 1px solid #ccc" id="header-container">

<table style="margin: 0; width: 100%; table-layout:fixed;">
<colgroup>
    <col width="150px">
    <col width="150px">
  </colgroup>
  <tr>
    <td><b>Name</b></td>
    <td><b>Title</b></td>
  </tr>
 </table>
 </div>
 <div style="overflow-y: scroll; max-height: 200px;" id="detail-container">
<table  style="margin: 0; table-layout: fixed; width: 100%;">   
 <colgroup>
    <col width="150px">
    <col width="150px">
  </colgroup>
  <tr>
    <td>Atish</td>
    <td>kumar</td>
  </tr>
  <tr>
    <td>Sandip</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Rohit</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Atul</td>
    <td>Sharma</td>
  </tr>
  <tr>
    <td>Moumita</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Nirmal</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Susmita</td>
    <td>Chatterjee</td>
  </tr>
  <tr>
    <td>Sekhar</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Gour</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Jotin</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Shyam</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Dipak</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Partha</td>
    <td>Sen</td>
  </tr>
</table>

</div>
</body>
</html>
相关问题
最新问题