Как сделать HTML-таблицу с вертикальной прокруткой

смотри jsbin

Я должен сделать мою таблицу HTML с вертикальной прокруткой.
Я использовал ниже код наtbody тег, но он не работает для меня

 <tbody style="height: 100px; overflow: auto">
 naim shaikh22 июн. 2012 г., 14:32
Nikhil, добавь "показ: блоки" Тебе и Теаде
 naim shaikh22 июн. 2012 г., 10:18
Вы можете сделать это, используя @Ashlash и мой ответ ..
 Tarun22 июн. 2012 г., 10:10
Используйте div, чтобы обернуть вашу таблицу и определить объявление переполнения в div обернутой таблице.
 Sense22 июн. 2012 г., 10:08
Возможно, вам следует использовать & lt; th & gt; вместо & lt; td & gt; в вашем & lt; thead & gt ;. Я не могу вам помочь, но я уверен, что вы найдете ответ на подобном примере.CSS Scrollable Table with Fixed header

Ответы на вопрос(9)

Просто добавьте блок display: thead & gt; tr и tbody. проверьте приведенный ниже пример

http://www.imaputz.com/cssStuff/bigFourVersion.html

 23 нояб. 2018 г., 14:47
Этот способ не работает, если какой-либо из столбцов не имеет заданной ширины. :-(
 18 февр. 2017 г., 06:38
привет, я довольно тупой как мне использовать пример? Все, что я вижу, это рабочий стол на этом сайте :(

Попробуйте это .. Это работает ... ЗдесьJSBIN

table tbody { height:300px; overflow-y:scroll; display:block; }
table thead { display:block; }
 14 мая 2014 г., 00:27
Этот метод будет работать, если вы учитываете ширину полосы прокрутки как часть заголовка, что, скорее всего, доставит больше хлопот, чем стоит. В основном вам нужно сделать заголовок на 21 пикселя шире, чем тело, чтобы учесть ширину полосы прокрутки, по крайней мере, в Chrome 34.0.1847.131 м, работающем в Windows 7.
 30 июл. 2013 г., 03:47
Это не сработает. Добавьте границы вокруг ячеек таблицы, и вы поймете, почему.jsbin.com/iveroj/114/edit

Лучший способ сделать это - строго разделить вашу таблицу на две разные таблицы - заголовок и тело:

<div class="header">
  <table><tr><!-- th here --></tr></table>
</div>

<div class="body">
  <table><tr><!-- td here --></tr></table>
</div>

.body {
  height: 100px;
  overflow: auto
}

Если ваша таблица имеет большую ширину (больше ширины экрана), то вам необходимо добавить события прокрутки для горизонтальной прокрутки заголовка и тела синхронно.

Вы никогда не должны касаться тегов таблицы (table, tbody, thead, tfoot, tr) свойствами CSSdisplay а такжеoverflow, Работа с обертками DIV намного предпочтительнее.

 20 мар. 2013 г., 17:13
Столбцы никогда не будут правильно выстраиваться без явного определения каждой ширины. Это не похоже на хороший подход.
 22 июн. 2012 г., 10:13
+1, хотя и с использованием "body" и "заголовок" как класс CSS кажется мне немного странным!
 22 июн. 2012 г., 11:46
Отделение заголовка таблицы от его содержимого кажется плохой практикой. Вот чтоtbody а такжеthead для.
Решение Вопроса

Почему бы вам не поставить свой стол в div?

<div style="height:100px;overflow:auto;">

 ... Your code goes here ...

</div>
 28 окт. 2013 г., 21:01
У div нет семантики таблицы, и он не решает - кроме нескольких div - вопроса о теле таблицы прокрутки за заголовком таблицы.

Вот мое решение (весной с Thymeleaf и jQuery):

HTML:

<!DOCTYPE html>
<html
    xmlns:th="http://www.thymeleaf.org"
    xmlns:tiles="http://www.thymeleaf.org">
    <body>
        <div id="objects" th:fragment="ObjectList">
            <br/>
            <div id='cap'>
                <span>Objects</span>
            </div>
            <div id="hdr">
                <div>
                    <div class="Cell">Name</div>
                        <div class="Cell">Type</div>
                </div>
            </div>
            <div id="bdy">
                <div th:each="object : ${objectlist}">
                        <div class="Cell" th:text="${object.name}">name</div>
                        <div class="Cell" th:text="${object.type}">type</div>
                </div>
            </div>
        </div>
    </body>
</html> 

CSS:

@CHARSET "UTF-8";
#cap span {
    display: table-caption;
    border:2px solid;
    font-size: 200%;
    padding: 3px;
}
#hdr {
    display:block;
    padding:0px;
    margin-left:0;
    border:2px solid;
}
#bdy {
    display:block;
    padding:0px;
    margin-left:0;
    border:2px solid;
}
#objects #bdy {
    height:300px;
    overflow-y: auto;
}
#hdr div div{
    margin-left:-3px;
    margin-right:-3px;
    text-align: right;
}
#hdr div:first-child {
    text-align: left;
}
#bdy div div {
    margin-left:-3px;
    margin-right:-3px;
    text-align: right;
}
#bdy div div:first-child {
    text-align: left;
}
.Cell
{
    display: table-cell;
    border: solid;
    border-width: thin;
    padding-left: 5px;
    padding-right: 5px;
}

JavaScript:

$(document).ready(function(){
    var divs = ['#objects'];
    divs.forEach(function(div)
    {
        if ($(div).length > 0)
        {
            var widths = [];
            var totalWidth = 0;
            $(div+' #hdr div div').each(function() {
                widths.push($(this).width())
            });
            $(div+' #bdy div div').each(function() {
                var col = $(this).index();
                if ( $(this).width() > widths[col] )
                {
                    widths[col] = $(this).width();
                }
            });
            $(div+' #hdr div div').each(function() {
                var newWidth = widths[$(this).index()]+5;
                $(this).css("width", newWidth);
                totalWidth += $(this).outerWidth();
            });
            $(div+' #bdy div div').each(function() {
                $(this).css("width", widths[$(this).index()]+5);
            });
            $(div+' #hdr').css("width", totalWidth);
            $(div+' #bdy').css("width", totalWidth+($(div+' #bdy').css('overflow-y')=='auto'?15:0));
        }
    })
});

Плагин jQuery, вероятно, лучший вариант.http://farinspace.com/jquery-scrollable-table-plugin/

Чтобы исправить заголовок вы можете проверить этот пост

Fixing Header of GridView or HtmlTable (может возникнуть проблема, что это должно работать только в IE)

CSS для исправления заголовка

div#gridPanel 
{
   width:900px;
   overflow:scroll;
   position:relative;
}


div#gridPanel th
{  
   top: expression(document.getElementById("gridPanel").scrollTop-2);
   left:expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
   position: relative;
   z-index: 20;
  }

<div height="200px" id="gridPanel" runat="server" scrollbars="Auto" width="100px">
table..
</div>

или же

Очень хороший пост здесь для этого

How to Freeze Columns Using JavaScript and HTML.

или же

Нет, это невозможно, но вы можете использовать div и поместить таблицу в div

<div style="height: 100px; overflow: auto">
  <table style="height: 500px;">
   ...
  </table>
</div>
 Nikhil D22 июн. 2012 г., 11:27
это не gridvies, это просто HTML-таблица .. в CSS получить выражение ошибки не является допустимым атрибутом для верхней
 Nikhil D22 июн. 2012 г., 10:13
это работает, но заголовок также вертикальной прокрутки, я должен сделать прокрутку тела с фиксированным заголовком thead..если вы хотите HTML-код, то я поставил jsbin
 22 июн. 2012 г., 11:32
@Nikhil - это будет работать в IE, только лучше, если вы воспользуетесь ссылкой на плагин jQuery, приведенной мной вверху, и поможет вам легко решить вашу задачу.

Это работа вокруг.

http://jsfiddle.net/JJV59/2/

[EDIT]

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>

<table cellspacing="1" width="100%" bgcolor="#cccccc">
    <thead>
        <tr>
            <td bgcolor="#ffffff" width="70px">
            </td>
            <td class="csstablelisttd" width="70px">
                <b>Time Slot&nbsp;</b>
            </td>
            <td class="csstablelisttd">
                <b>&nbsp;Patient Name</b>
            </td>
        </tr>
    </thead>
</table>
<!-- THIS GIVES THE SCROLLER -->
<div style="height: 500px; overflow-y: auto">
    <table id="tableAppointment" cellspacing="1" width="100%" bgcolor="#cccccc">
         <tbody>
            <tr>
                <td class="csstablelisttd" valign="top" width="70px">
                    8:00AM
                </td>
                <td class="csstablelisttd" width="70px">
                    0
                </td>
                <td class="csstablelisttd">
                    <span>Name 1</span>
                </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        9:00AM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        10:00AM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        11:00AM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        12:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        01:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        02:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        03:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        04:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        05:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        06:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        07:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        08:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
            </tbody>
        </table>    
    </div>

</body>
</html>
 22 июн. 2012 г., 12:02
извиняюсь, неправильно прочитал ваш предыдущий комментарий, обновил ответ сейчас
 Nikhil D22 июн. 2012 г., 11:55
ты там.png html
 Nikhil D22 июн. 2012 г., 11:31
Можете ли вы положить весь HTML в вашем ответе. В JSFIDDLE я не могу получить HTML
 Nikhil D22 июн. 2012 г., 12:39
У вас есть разные табличные для заголовка и тела это не должно быть так, как я хочу в одном заголовке и теле таблицы, потому что моя функциональность javascript зависит от thead

Я боролся с этим некоторое время. Моя цель состояла в том, чтобы иметь таблицу с заголовками, где ширина каждого столбца заголовка была такой же, как у соответствующего столбца тела, и имела минимальный размер, необходимый для размещения данных. также данные тела были прокручиваться под заголовком.

Я решил это, используя div, а не таблицы. Каждая «таблица» был div с заголовком, являющимся div div и телом, являющимся div div. Я использовал стиль, указанный @sushil выше. Я добавил немного javascript / jQuery, чтобы сбалансировать столбцы. Возможно 20-30 строк.

К сожалению, я потерял код и должен восстановить его. Я знаю, что это немного стар, но, возможно, это поможет кому-то еще.

Привет, попробуйте с этим переполнением-у: прокрутки. Я надеюсь, что это может помочь вам

 22 июн. 2012 г., 10:15
используйте div вместо таблицы
 Nikhil D22 июн. 2012 г., 10:08
overflow-y не является известным именем свойства CSS и завершается ошибкой

Ваш ответ на вопрос