logo标签列表

添加水平滚动表格

jquerycsshtml
4

我创建了一个简单的HTML表格，其中一些数据是预定义的，但我想在这个表格中添加一个水平滚动条，使顶部行（名称，标题）始终固定。但是如何添加水平滚动条呢？

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

好问题 :D - RacoonOnMoon
如果我不确定为什么在这里发帖，那就是一个愚蠢的问题。哈哈 - Susant
3个回答
1
尝试使用CSS 

.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));
}
<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>

水平滚动。 

.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
}
<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>

1

添加overflow-x属性，以获得您内部表格的水平滚动条。希望这可以解决您的问题。

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

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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接