Я хотел бы иметь таблицу с полосой прокрутки вправо.
Я хочу выполнить это без каких-либо плагинов (jQuery) только с помощью css.
Предполагается, что заголовок таблицы остается фиксированным.
Что мне нужно сделать, чтобы это сработало?
<table> <tbody> прокручивается?
Ответ 1
Вы взяли на себя задачу, которая, если вам это удастся, сделает вас героем. Я пробовал это и прямое дело - положению: исправлено; <thead> - невозможно. Мне пришлось скопировать все данные <thead> в новый объект. Но когда вы это делаете, горизонтальное расстояние элементов <th> исчезает, поэтому заголовки больше не совпадают с <td> s. В итоге я сделал что-то вроде этого:
Прежде всего, отказаться от ie6 и ie7. Там нет надежды для этих парней.
-
Сделайте две копии таблицы: ту, где тело невидимо, и символ <thead> виден, а другой - наоборот.
-
Дайте z-index: 1; к таблице с видимым <thead> .
-
Дайте z-index: 0; к таблице с видимым <tbody> .
-
Сходите с горизонтальной прокруткой, но только после того, как вы обнаружите, что onScroll не является событием ie8 (не говоря уже о ie6), так что вам нужно сделать перерыв setInterval каждую десятую секунды или около того только для обрабатывать прокрутку <thead> влево и вправо в ie8.
Это даст вам таблицу бесконечного прокрутки в обеих осях, с головкой таблицы, которая прокручивается только по оси x. Довольно много работает в FF, Chrome и Safari. Но шатко в ie8. Настоящая лаваш.
Удачи, и напишите, если вы заработаете!
Ответ 2
Только браузер Firefox и IE6-7 поддерживает встроенную прокрутку <tbody>:
<!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>
<title>Scrolling</title>
<style type="text/css">
div.content
{
border: #000000 1px solid;
height: 400px;
overflow-y: auto;
width: 800px;
}
.fixedHeader
{
white-space: nowrap;
}
.fixedHeader tr
{
height: auto;
position: relative;
}
.fixedHeader tr td
{
background-color: #778899;
border: #000000 1px solid;
text-align: center;
}
tbody.scrollContent
{
overflow-x: hidden;
overflow-y: auto;
height: 370px;
}
.scrollContent tr td
{
background-color: #C0C0C0;
border: #000000 1px solid;
padding-right: 22px;
vertical-align: top;
}
</style>
<!--[if IE]>
<style type=text/css>
div.content
{
overflow-x: hidden;
overflow-y: auto;
}
</style>
<![endif]-->
</head>
<body>
<div>
<div class="content">
<table cellspacing="0">
<thead class="fixedHeader">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. </td>
<td>Pages can be displayed either with or without tabs. </td>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Ответ 3
Вот решение,
Таблица фиксированного заголовка, а содержимое внутри таблицы может быть прокручиваемым.
Часть HTML
<div class="table_wrapper">
<div class="header">
<div class="head1">Left</div>
<div class="head2">Center</div>
<div class="head3">Right Column</div>
</div>
<div class="tbody">
<table>
<tbody><tr><td class="td1">1</td><td class="td2">2</td><td class="td3">3</td></tr>
<tr><td class="td1">1</td><td>2</td><td class="td3">3</td></tr>
<tr><td class="td1">2</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">3</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
</tbody></table>
</div>
</div>
Часть CSS
.table_wrapper {background:tomato;border:1px double olive;float:left;}
.tbody{height:80px;overflow-y:auto;width:400px;background:yellow;}
table{border-collapse:collapse; width:100%;}
td{border-right:1px solid red;border-bottom:1px solid red;padding:1px 5px;}
.td3{border-right-width:0;}
.header{ width:400px;background:DodgerBlue;border-bottom:1px solid red;}
.header div{padding:1px 5px;float:left;border-right:1px solid orange;}
.header .head3{float:none;border-right-width:0;}
.head3 span{padding-left:5px;}
.td1{width:100px;}
.td2{width:140px;}
.header .head1{width:100px;}
.header .head2{width:140px;}
Ответ 4
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
table
{
width: 320px;
display: block;
border:solid black 1px;
}
thead
{
display: inline-block;
width: 100%;
height: 20px;
}
tbody
{
height: 200px;
display: inline-block;
width: 100%;
overflow: auto;
}
th, td
{
width: 100px;
text-align:center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
</body>
</html>
Ответ 5
Этот простой CSS должен сделать трюк:
table.table-scroll-body {
position: relative;
height: 200px; }
table.table-scroll-body tbody {
position: absolute;
width: 100%;
max-height: 150px;
overflow: auto; }
И HTML, если вам это нужно.
<table class="table-scroll-body">
<thead>
<th>Header 1</th>
<th>Header 2</th>
</thead>
<tbody>
<tr>
<td>Some content..</td>
<td>Some content..</td>
</tr>
<tr>
<td>Some content..</td>
<td>Some content..</td>
</tr>
<tr>
<td>Some content..</td>
<td>Some content..</td>
</tr>
</tbody>
Ответ 6
ответвление от astrandr answer.. вот как я это сделал, используя их пример:
CSS
.transactHistory table
{
width: 320px;
display: block;
}
.transactHistory thead
{
display: inline-block;
}
.transactHistory tbody
{
height: 133px;
display: inline-block;
width: 100%;
overflow: auto;
}
.transactHistory th
{
width: 100px;
text-align:center;
}
.transactHistory tr
{
width: 100px;
text-align:center;
}
.transactHistory td
{
width: 100px;
text-align:center;
}
Таблица:
<div class="transactHistory">
(..table code)
</div>
Ответ 7
Это работает, сразу же снял мой сайт:
#news_box {
overflow: scroll;
overflow-x: hidden;
}
EDIT:
Я также нашел это с хорошим примером:
http://www.imaputz.com/cssStuff/bigFourVersion.html
Вот еще одна хорошая статья об этом:
http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html