如何将滚动条添加到HTML5表？

Question

我在HTML5中有一个表格，我想添加一个滚动条。我希望表格显示十行，然后用户可以向下滚动以查看其他歌曲。如何添加滚动条？

以下是HTML5中表格的代码：

<table id="my_table" table border="5">
  <tr>
    <th>URL</th>
  </tr>
  <tr>
    <td>http://www.youtube.com/embed/evuSpI2Genw</td>
  </tr>
  <tr>
    <td>http://www.youtube.com/embed/evuSpI2Genw</td>
  </tr>
</table>

这是我的CSS代码：

#my_table {
    border-radius: 20px;
    background-color: transparent;
    color: black;
    width: 500px;
    text-align: center;
}

Answer 1

如果你已经前往你的表格列并且你不想滚动那些标题，那么这个解决方案可以帮助你：

此解决方案需要thead元素内的tbody和table个标记。

table.tableSection {
    display: table;
    width: 100%;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}
table.tableSection tbody {
    overflow: auto;
    height: 150px;
}
table.tableSection tr {
    width: 100%;
    display: table;
    text-align: left;
}
table.tableSection th, table.tableSection td {
    width: 33%;
}

<强> Working fiddle

With comments

注意：如果您确定始终存在垂直滚动条，则可以使用css3 calc属性使thead单元格与tbody单元格对齐。

table.tableSection thead {
    padding-right:18px;   /* 18px is approx. value of width of scroll bar */
    width: calc(100% - 18px);
}

您可以通过使用javascript检测滚动条的存在并应用上述样式来执行相同操作。

Answer 2

而不是假设为固定宽度列。

CSS

table.tableSection {
  display: table;
  width: 100%;
}

table.tableSection thead,
table.tableSection tbody {
  width: 100%;
}

table.tableSection thead {
  overflow-y: scroll;
  display: table;
  table-layout: fixed;
  width: calc(100% - 16px); /* assuming scrollbar width as 16px */
}

table.tableSection tbody {
  overflow: auto;
  height: 150px;
  display: block;
}

table.tableSection tr {
  width: 100%;
  text-align: left;
  display: table;
  table-layout: fixed;
}

Working Fiddle

Answer 3

这是我在很多场合使用过的技巧。它最初基于this fiddle，并进行了许多修改。它也是流体，并且可以通过向<th>添加宽度样式来修复列宽。

＆＃13;

＆＃13;

/* this is for the main container of the table, also sets the height of the fixed header row */
.headercontainer {
  position: relative;
  border: 1px solid #222;
  padding-top: 37px;
  background: #000;
}
/* this is for the data area that is scrollable */
.tablecontainer {
  overflow-y: auto;
  height: 200px;
  background: #fff;
}

/* remove default cell borders and ensures table width 100% of its container*/
.tablecontainer table {
  border-spacing: 0;
  width:100%;
}

/* add a thin border to the left of cells, but not the first */
.tablecontainer td + td {
  border-left:1px solid #eee; 
}

/* cell padding and bottom border */
.tablecontainer td, th {
  border-bottom:1px solid #eee;
  padding: 10px;
}

/* make the default header height 0 and make text invisible */
.tablecontainer th {
    height: 0px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 0;
    visibility: hidden;
    white-space: nowrap;
}

/* reposition the divs in the header cells and place in the blank area of the headercontainer */
.tablecontainer th div{
  visibility: visible;
  position: absolute;
  background: #000;
  color: #fff;
  padding: 9px 10px;
  top: 0;
  margin-left: -10px;
  line-height: normal;
   border-left: 1px solid #222;
}
/* prevent the left border from above appearing in first div header */
th:first-child div{
  border: none;
}

/* alternate colors for rows */
.tablecontainer tbody  tr:nth-child(even){
     background-color: #ddd;
}

＆＃13;

<div class="headercontainer">
  <div class="tablecontainer">
    <table>
      <thead>
        <tr>
          <th>
              Table attribute name
            <div>Table attribute name</div>
          </th>
          <th>
            Value
            <div>Value</div>
          </th>
          <th>
            Description
            <div>Description</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
        </tr>
        <tr>
          <td>bgcolor</td>
          <td>rgb(x,x,x), #xxxxxx, colorname</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
        </tr>
        <tr>
          <td>border</td>
          <td>1,""</td>
          <td>Specifies whether the table cells should have borders or not</td>
        </tr>
        <tr>
          <td>cellpadding</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
        </tr>
        <tr>
          <td>cellspacing</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between cells</td>
        </tr>
        <tr>
          <td>frame</td>
          <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
          <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
        </tr>
        <tr>
          <td>rules</td>
          <td>none, groups, rows, cols, all</td>
          <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
        </tr>
        <tr>
          <td>summary</td>
          <td>text</td>
          <td>Not supported in HTML5. Specifies a summary of the content of a table</td>
        </tr>
        <tr>
          <td>width</td>
          <td>pixels, %</td>
          <td>Not supported in HTML5. Specifies the width of a table</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

同样作为JSFiddle

Answer 4

问题问题已经过去了一年左右，但我对答案并不满意。我摆弄了一段时间，这是一个代码：

• 适用于IE8 +和所有其他浏览器;
• 很容易理解;
• 完美排列单元格边框（固定宽度单元格）;
• 在身体滚动时修复头部;
• 自动适应触摸屏。

现场演示：http://jsbin.com/bagaro/1/edit?html,output。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Scrollabe table</title>
    <!-- Substantially simplified and improved version of the table on
    http://www.cssbakery.com/2010/12/css-scrolling-tables-with-fixed.html -->
    <script>
        if ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch)) {
            document.documentElement.className += ' touchScreen';
        }
    </script>
    <style>
        /* BASICS: */
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box; /* in case block elements are used inside table cells */
    }
    html {
        font-size: 62.5%; /* standardizes older IEs */
    }
    body {
        font: normal 1.3em Verdana; /* = 13px */
    }
    table {
        border-collapse: collapse;
        table-layout: fixed;
        empty-cells: show;
    }
    td {
        border: 1px solid black;
        padding: 4px;
    }
        /* SCROLL TABLE ESSENTIALS (+ SOME ADDITIONAL CSS): */
    div#scrollTableContainer {
        width: 617px;
        margin: 40px; /* just for presentation purposes */
        border: 1px solid black;
    }
    .touchScreen div#scrollTableContainer {
        width: 600px; /* touch devices do not form scrollbars (= 17 px wide) */
    }
    #tHeadContainer {
        background: #CC3600;
        color: white;
        font-weight: bold;
    }
    #tBodyContainer {
        height: 240px;
        overflow-y: scroll;
    }
    .touchScreen #tBodyContainer {
        -webkit-overflow-scrolling: touch; /* smooths scrolling on touch screens */
    }
        /* FINER LAYOUT MATTERS: */
    tr:first-child td {
        border-top: 0;
    }
    #tBody tr.lastRow td {
        border-bottom: 0;
    }
    td:first-child {
        min-width: 108px; /* Firefox needs min- and max-widths */
        max-width: 108px;
        border-left: 0;
    }
    td:first-child + td {
        min-width: 125px;
        max-width: 125px;
    }
    td:first-child + td + td {
        min-width: 90px;
        max-width: 90px;
    }
    td:first-child + td + td + td {
        min-width: 95px;
        max-width: 95px;
    }
    td:first-child + td + td + td + td {
        width: 180px; /* here, Firefox messes up with only min- and max-widths */
        border-right: 0;
    }
        /* AND SOME CSS TO INFORM TOUCH SCREEN USERS: */
    p#touchDeviceText {
        display: none;
    }
    .touchScreen p#touchDeviceText {
        display: block;
    }
    </style>
</head>
<body>
    <p id="touchDeviceText">This table is scrollable</p>
    <div id="scrollTableContainer">
        <div id="tHeadContainer">
            <table id="tHead">
                <tr>
                    <td>Name</td>
                    <td>Operator</td>
                    <td>Began operation</td>
                    <td>Tonnage</td>
                    <td>Status</td>
                </tr>
            </table>
        </div><!-- tHeadContainer -->
        <div id="tBodyContainer">
            <table id="tBody">
                <tr>
                    <td>Seabourne Sun</td>
                    <td>Seabourn Cruise Line</td>
                    <td>1988</td>
                    <td>?</td>
                    <td>Ended service in 2002, currently operating as Prinsendam</td>
                </tr>
                <tr>
                    <td>Adventures of the Seas</td>
                    <td>Royal Caribbean International</td>
                    <td>2001</td>
                    <td>138,000</td>
                    <td>Operating</td>
                </tr>
                <tr>
                    <td>Oceanic Independence</td>
                    <td>American Hawaiian Cruises / American Global Line</td>
                    <td>1974</td>
                    <td>23,719</td>
                    <td>Named formerly (1951-1974) and subsequently renamed (1982-2006) the Independence, renamed the Oceanic (2006), sold for scrap in 2008 but remains in mothballs</td>
                </tr>
                <tr>
                    <td>Cunard Ambassador</td>
                    <td>Cunard Line</td>
                    <td>1972</td>
                    <td>14,160</td>
                    <td>Burnt 1974, rebuilt into a livestock carrier, renamed Linda Clausen, later Procyon, Raslan. Scrapped 1984 after a second fire.</td>
                </tr>
                <tr>
                    <td>Aegean Beauty</td>
                    <td>Voyages to Antiquity</td>
                    <td>1973</td>
                    <td>11,563</td>
                    <td>Formerly Aegean Dolphin and Aegean I. Operating</td>
                </tr>
                <tr>
                    <td>Serenade of the Seas</td>
                    <td>Royal Caribbean International</td>
                    <td>2003</td>
                    <td>90,090</td>
                    <td>Operating</td>
                </tr>
                <tr>
                    <td>Queen Elizabeth 2</td>
                    <td>Cunard Line</td>
                    <td>1969</td>
                    <td>70,327</td>
                    <td>Left fleet in November 2008</td>
                </tr>
                <tr>
                    <td>National Geographic Endeavour</td>
                    <td>Lindblad Expeditions</td>
                    <td>1996</td>
                    <td></td>
                    <td>Operating, also known as Endeavour</td>
                </tr>
                <tr class="lastRow">
                    <td>Liberty of the Seas</td>
                    <td>Royal Caribbean International</td>
                    <td>2007</td>
                    <td>154,407</td>
                    <td>Operating</td>
                </tr>
            </table>
        </div><!-- tBodyContainer -->
    </div><!-- scrollTableContainer -->
</body>
</html>

Answer 5

将此表用于DIV

<div class="tbl_container">
<table> .... </table>
</div>


.tbl_container{ overflow:auto; width: 500px;height: 200px; }

除此之外如果你想让它变得更漂亮和更有吸引力，请使用jscollpane来自定义你的滚动条..

Answer 6

使用flexbox，没有javascript，而且它是响应式的。

＆＃13;

＆＃13;

/* styles */

table {
  font-family: sans-serif;
  border-collapse: collapse;
  max-height: 300px;
  overflow: auto;
}

td,
th {
  border: 1px solid #ddd;
  text-align: left;
  padding: 8px;
  background: #fff;
}

tr:nth-child(odd) td {
  background-color: #eee;
}

/* fixed headers */

table,
thead,
tbody {
  display: block;
}

thead {
  position: sticky;
  top: 0;
}

tr {
  display: flex;
}

th,
td {
  flex: 1;
  min-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

＆＃13;

<h2>HTML Table</h2>
<div class=wrap>
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
        <th>Sex</th>
        <th>Example</th>
        <th>Example</th>
        <th>ExampleReallyReallyLong</th>
        <th>Example</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Example Really Really Long</td>
        <td>ExampleReallyReallyLong</td>
        <td>Yes</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 7

HTML：

    <h1>&darr; SCROLL &darr;</h1>
<table class="blue">
  <thead>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 2</th>
      <th>Colonne 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
       <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
  </tbody>
</table>

<h1 class="scrollMore">&darr; SCROLL MORE &darr;</h1>
<table class="purple">
  <thead>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 2</th>
      <th>Colonne 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
       <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
       <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
  </tbody>
</table>
<h1 class="up scrollMore">&uarr; UP &uarr;</h1>

CSS：

body{
  font:1.2em normal Arial,sans-serif;
  color:#34495E;
}

h1{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:-2px;
  font-size:2.5em;
  margin:20px 0;
}

.container{
  width:90%;
  margin:auto;
}

table{
  border-collapse:collapse;
  width:100%;
}

.blue{
  border:2px solid #1ABC9C;
}

.blue thead{
  background:#1ABC9C;
}

.purple{
  border:2px solid #9B59B6;
}

.purple thead{
  background:#9B59B6;
}

thead{
  color:white;
}

th,td{
  text-align:center;
  padding:5px 0;
}

tbody tr:nth-child(even){
  background:#ECF0F1;
}

tbody tr:hover{
background:#BDC3C7;
  color:#FFFFFF;
}

.fixed{
  top:0;
  position:fixed;
  width:auto;
  display:none;
  border:none;
}

.scrollMore{
  margin-top:600px;
}

.up{
  cursor:pointer;
}

JS（jQuery）：

;(function($) {
   $.fn.fixMe = function() {
      return this.each(function() {
         var $this = $(this),
            $t_fixed;
         function init() {
            $this.wrap('<div class="container" />');
            $t_fixed = $this.clone();
            $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
            resizeFixed();
         }
         function resizeFixed() {
            $t_fixed.find("th").each(function(index) {
               $(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
            });
         }
         function scrollFixed() {
            var offset = $(this).scrollTop(),
            tableOffsetTop = $this.offset().top,
            tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
            if(offset < tableOffsetTop || offset > tableOffsetBottom)
               $t_fixed.hide();
            else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
               $t_fixed.show();
         }
         $(window).resize(resizeFixed);
         $(window).scroll(scrollFixed);
         init();
      });
   };
})(jQuery);

$(document).ready(function(){
   $("table").fixMe();
   $(".up").click(function() {
      $('html, body').animate({
      scrollTop: 0
   }, 2000);
 });
});

对于初学者程序员： 如果您不想自己下载和托管jQuery，可以从CDN（内容分发网络）中包含它。

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head> 

将jQuery添加到您的网页click here。

参考：HERE

Answer 8

您可以使用值滚动来使用具有overflow属性的除法类。或者您可以将表格包含在iframe中。 iframe适用于新旧IE浏览器，但它可能不适用于其他浏览器，可能不适用于最新的IE浏览器。

 #myid { overflow-x: scroll; overflow-y: hide; width:200px; /* Or whatever the amount of pixels */ }
.myid { overflow-x: scroll; overflow-y: hide; width:200px; /* Or whatever the amount of pixels */ }

<div class="myid">
     <div class="row">Content1</div>
     <div class="row2">Content2</div>
</div>

<table id="myid"><tr><td>Content</td></tr></table>

Answer 9

你可以试试这个

CSS：

          #table-wrapper {
                height:150px;
                overflow:auto;  
                margin-top:20px;
                  }
          #table-wrapper table {
                 width:100%;
                 color:#000;    
                 }
          #table-wrapper table thead th .text {
                  position:fixed;   
                  top:0px;  
                  height:20px;
                  width:35%;
                  border:1px solid red;
               }

HTML：

<div id="table-wrapper">

    <table>
        <thead>
            <tr>
                <th><span class="text">album</span></th>
                <th><span class="text">song</span></th>
                <th><span class="text">genre</span></th>
            </tr>
        </thead>
        <tbody>
<tr> <td> album 0</td> <td> song0</td> <td> genre0</td> </tr>
<tr> <td>album 1</td> <td>song 1</td> <td> genre1</td> </tr>
<tr> <td> album2</td> <td>song 2</td> <td> genre2</td> </tr>
<tr> <td> album3</td> <td>song 3</td> <td> genre3</td> </tr>
<tr> <td> album4</td> <td>song 4</td> <td>genre 4</td> </tr>
<tr> <td> album5</td> <td>song 5</td> <td>genre 5</td> </tr>
<tr> <td>album 6</td> <td> song6</td> <td> genre6</td> </tr>
<tr> <td>album 7</td> <td> song7</td> <td> genre7</td> </tr>
<tr> <td> album8</td> <td> song8</td> <td>genre 8</td> </tr>
<tr> <td> album9</td> <td> song9</td> <td> genre9</td> </tr>
<tr> <td> album10</td> <td>song 10</td> <td> genre10</td> </tr>
<tr> <td> album11</td> <td>song 11</td> <td> genre11</td> </tr>
<tr> <td> album12</td> <td> song12</td> <td> genre12</td> </tr>
<tr> <td>album 13</td> <td> song13</td> <td> genre13</td> </tr>
<tr> <td> album14</td> <td> song14</td> <td> genre14</td> </tr>
<tr> <td> album15</td> <td> song15</td> <td> genre15</td> </tr>
<tr> <td>album 16</td> <td> song16</td> <td> genre16</td> </tr>
<tr> <td>album 17</td> <td> song17</td> <td> genre17</td> </tr>
<tr> <td> album18</td> <td> song18</td> <td> genre18</td> </tr>
<tr> <td> album19</td> <td> song19</td> <td> genre19</td> </tr>
<tr> <td> album20</td> <td> song20</td> <td> genre20</td> </tr>    
        </tbody>
    </table>
  </div>

检查这个小提琴：http://jsfiddle.net/Kritika/GLKxB/1/

这会使table头部fixed和scroll仅保留table content。

Answer 10

@jogesh_pi答案是一个很好的解决方案，我在这里创建了一个例子http://jsfiddle.net/pqgaS/5/，检查一下，希望这个帮助

<div id="listtableWrapperScroll">
    <table id="listtable">
        <tr>
            <td>Data Data</td>
            <td>Data Data</td>
            <td>Data Data</td>                
        </tr>
    </table>
</div>

#listtableWrapperScroll{
    height:100px;
    width:460px;
    overflow-y:scroll;
    border:1px solid #777777;
    background:#FFFFF2;
}
#listtableWrapperScroll #listtable{
    width:440px;       
}
#listtableWrapperScroll #listtable tr td{
    border-bottom:1px dashed #444;
}

Answer 11

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Scrollable Table</title>
    <style type="text/css">
      * { padding: 0; margin: 0; }
      table.my_table { 
        font-family: verdana, arial, helvetica, sans-serif;
        font-size: 11px;
        cellspacing: 0; 
        border-collapse: collapse; 
        width: 283px;    
        }
      table.my_table th, table.my_table td { 
        border-bottom: 1px solid #999; 
        border-right: 1px solid #999; 
        }
      table.my_table th { background: #ffb; }
      table.my_table td { background: #ffe; }

      div.scrollableContainer { 
        height: 100px; 
        overflow: auto;  
        width: 300px; 
        margin: 40px;    
        border: 1px solid #999;
        background: #ffb;     
        }

    </style>
    </head>
    <body>
    <div class="scrollableContainer">
        <table class="my_table scrollable">
          <thead>
            <tr>
              <th>URL</th>
                </tr>
        </thead>

        <tbody>
                <tr>
              <td>http://www.youtube.com/embed/evuSpI2Genw</td> 
                    </tr>

                    <tr>
              <td>http://www.youtube.com/embed/evuSpI2Genw</td>                   
                    </tr>

                    <tr>
              <td>http://www.youtube.com/embed/evuSpI2Genw</td> 
                    </tr>

                    <tr>
              <td>http://www.youtube.com/embed/evuSpI2Genw</td>                   
                    </tr>

                    <tr>
              <td>http://www.youtube.com/embed/evuSpI2Genw</td> 
                    </tr>

                    <tr>
              <td>http://www.youtube.com/embed/evuSpI2Genw</td>                   
                    </tr>

                    <tr>
              <td>http://www.youtube.com/embed/evuSpI2Genw</td> 
                    </tr>

                    <tr>
              <td>http://www.youtube.com/embed/evuSpI2Genw</td>                   
                    </tr>
            </tbody>
          </table>
        </div>
      </body>
    </html>

Answer 12

我最简单的解决方案是基于 固定列布局 。您必须设置每列的宽度，例如：4列100px，每个等于400px总宽度。

table {
  table-layout: fixed;
  width: 400px;
}
td, th {
  width: 100px;
}

固定表格布局算法与自动表格布局算法相比具有许多优点（例如：水平布局仅取决于表格的宽度和列的宽度，而不是单元格的内容;允许浏览器比自动表格布局更快地布置表格;浏览器可以在收到第一行后开始显示表格;等等。）

然后，您必须将显示样式强制设为block而不是默认table-*

，从而将thead与tbody分开

thead tr {
  display: block;
}
tbody {
  display: block;
  height: 256px;
  overflow-y: auto;
}

这将使tbody作为单独的框滚动而thead与其无关。这就是你必须如上所述修改列宽的主要原因。

工作JsFiddle：https://jsfiddle.net/angiolep/65q1gdcy/1/

Answer 13

这是一个具有挑战性的问题。我认为我终于有一个满足完整要求的解决方案：垂直和水平可滚动动态表（动态，因为你可以改变行和列的数量，没有单元格具有固定的宽度或高度）。

HTML和CSS布局非常简单，正如其他人提到的那样。关键问题是重新计算（JavaScript）单元格宽度。为了确保水平滚动有效，我还重新计算了theader和tbody width。

这是一个小提琴https://jsfiddle.net/jmarcos00/6hv0dsj8/1/

HTML code：

<!--
thead and tbody have identifiers
table is inside a div container
-->
<div>
  <table>
    <thead id="mythead">
      <tr>
        <th>header one</th>
        <th>two</th>
        <th>header three</th>
        <th>header one</th>
        <th>two</th>
        <th>header three</th>
      </tr>
    </thead>
    <tbody id="mytbody">
      <tr>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
      </tr>
      <tr>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
      </tr>
      <tr>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
      </tr>
      <tr>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
      </tr>
      <tr>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
      </tr>
      <tr>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
      </tr>
      <tr>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
      </tr>
      <tr>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
      </tr>
      <tr>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
      </tr>
      <tr>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
        <td>one</td>
        <td>data two</td>
        <td>three</td>
      </tr>
    </tbody>
  </table>
</div>

CSS代码：

/* table border rule */
table, td, th { border: 1px solid black; }

/* display as block plus display vertical scroll bars */
thead, tbody { display: block; overflow-y: scroll; }

/* sample height */
tbody { height: 100px; }

/* sample width and horizontal scroll bar */
div { width: 200px; overflow-x: auto; }

JavaScript代码：

var i, w, wtot, thtot, thw, tdw, theadtr, tbodytr;
var th_rect, td_rect, theadtr_rect, tbodytr_rect;
var safe = new Array();

// get thead and tbody
var mythead = document.getElementById("mythead");
var mytbody = document.getElementById("mytbody");

// get first tr of thead and tbody
theadtr = mythead.children[0];
tbodytr = mytbody.children[0];
theadtr_rect = theadtr.getBoundingClientRect();
tbodytr_rect = tbodytr.getBoundingClientRect();

// get width difference of longer first tr
//   difference between tr and parent
if (tbodytr_rect.width > theadtr_rect.width)
    wtot = mytbody.getBoundingClientRect().width - tbodytr_rect.width;
else
    wtot = mythead.getBoundingClientRect().width - theadtr_rect.width;

// get width difference between tr and total th width (first step)
thtot = theadtr_rect.width;

// get th thead array and td tbody array
theadtr = theadtr.children;
tbodytr = tbodytr.children;

// get loop
for (i = 0; i < theadtr.length; i++)
{
    // second step for width difference between tr and total th width
    th_rect = theadtr[i].getBoundingClientRect();
    td_rect = tbodytr[i].getBoundingClientRect();
    thtot -= th_rect.width;

    // get width of each th and first row td (without paddings etc)
    tdw = parseFloat(window.getComputedStyle(tbodytr[i]).getPropertyValue("width"));
    thw = parseFloat(window.getComputedStyle(theadtr[i]).getPropertyValue("width"));

    // get bigger width
    w = (tdw > thw) ? tdw : thw;
    safe.push(w);

    // add to width total (decimal value with paddings etc)
    w = (tdw > thw) ? td_rect.width : th_rect.width;
    wtot += w;
}

// consider tr width and total th width difference
wtot += thtot;

// set loop
for (i = 0; i < theadtr.length; i++)
{
    // set width to th and first row td
    w = safe[i] + "px";
    theadtr[i].style.width = w;
    tbodytr[i].style.width = w; 
}

// set width for thead and tbody
wtot = wtot + "px";
mythead.style.width = wtot;
mytbody.style.width = wtot;

Answer 14

我首先尝试了格林先生接受的答案，但是我发现我的栏不对齐，即float：left似乎非常可疑。当我从无滚动条转到滚动条时，我的表体移动了几个像素，并且失去了对齐能力。

代码笔 https://codepen.io/majorp/pen/gjrRMx

CSS

.width50px {
    width: 100px !important;
}

.width100px {
    width: 100px !important;
}


.fixed_headers {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

th {
    padding: 5px;
    text-align: left;
    font-weight:bold;
    height:50px;
}

td {
    padding: 5px;
    text-align: left;
}

thead, tr 
{
    display: block;
    position: relative;
}


tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: 500px;
}

.tableColumnHeader {
    height: 50px;
    font-weight: bold;
}




.lime {
    background-color: lime;
}