Можно ли зафиксировать первый столбец при прокрутке по горизонтали?Создание первой колонки в таблице, фиксированной при прокрутке по горизонтали
Другие столбцы будут прокручиваться, но 1-й столбец должен оставаться видимым.
JSFiddle здесь: http://jsfiddle.net/FSv9Y/
HTML (фиктивные данные для проверки этого)
<div class="vScroll">
<table style="width: 90%">
<thead>
<tr>
<th>A1 Component</th>
<th>A2 Component</th>
<th>A3 Component</th>
<th>A4 Component</th>
<th>A5 Component</th>
<th>A6 Component</th>
<th>A7 Component</th>
</tr>
</thead>
<tbody>
<tr>
<td>Line Item 1</td>
<td>Line Item 2</td>
<td>Line Item 3</td>
<td>Line Item 4</td>
<td>Line Item 5</td>
<td>Line Item 6</td>
<td>Line Item 7</td>
</tr>
<tr>
<td>Line Item 1</td>
<td>Line Item 2</td>
<td>Line Item 3</td>
<td>Line Item 4</td>
<td>Line Item 5</td>
<td>Line Item 6</td>
<td>Line Item 7</td>
</tr>
<tr>
<td>Line Item 1</td>
<td>Line Item 2</td>
<td>Line Item 3</td>
<td>Line Item 4</td>
<td>Line Item 5</td>
<td>Line Item 6</td>
<td>Line Item 7</td>
</tr>
<tr>
<td>Line Item 1</td>
<td>Line Item 2</td>
<td>Line Item 3</td>
<td>Line Item 4</td>
<td>Line Item 5</td>
<td>Line Item 6</td>
<td>Line Item 7</td>
</tr>
</tbody>
</table>
</div>
CSS (используется для всего основного стиля и прокруткой на этом демо)
/* Standardize Table Styling Across Browsers for Both Standard and Scrollable Tables */
table {border:none;border-collapse:collapse;line-height:18px;margin-right:1px;table-layout:fixed;}
th, td {margin:0px;padding:0px;}
/* Little Bit of Custom Styling for Flare */
th {background-color:#E9E9E9;border:solid 1px silver;}
td {border:solid 1px silver;}
/* Enable Scroll Styling Effect */
.vScroll {display:run-in;overflow-x:none;overflow-y:scroll;}
/* Fix Positioning Issue in IE 8 (and Earlier) and Mozilla */
.vScroll {border-left:solid 1px silver;}
.vScroll td:first-child {border-left:none;}
.vScroll thead, .vScroll tfoot {margin-left:-1px;}
/* Standardize Scrollbar in Safari to Be Same Width as Chrome, IE and Mozilla. */
::-webkit-scrollbar {width:16px;}
::-webkit-scrollbar-track {border-radius:10px;-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
::-webkit-scrollbar-thumb {background-color:silver;border-radius:10px;-webkit-box-shadow: inset 0 0 3px rgba{0,0,0,0.5);}
JS
function ReSizeScrollTables() {
$(".vScroll").each(function (i,c) {
var ScrollBarWidth = 16; //IE, Chrome, Mozilla & Opera use Size 16 by default
var $Scroll = $(c);
var $Table = $Scroll.find("table");
var $Head = $Scroll.find("thead");
var $Foot = $Scroll.find("tfoot");
var $Body = $Scroll.find("tbody");
//Remove Cell Width Formatting
$Body.first("tr").find("th, td").each(function (i, c) { $(c).css("width", "auto"); });
$Head.find("th, td").each(function (i, c) { $(c).css("width", "auto"); });
$Foot.find("th, td").each(function (i, c) { $(c).css("width", "auto"); });
//Set Width of Table, Header, Footer and Body Elements
$Table.css("width", $Scroll.width() - ScrollBarWidth + 2);
//Disable positioning so browser can do all the hard work.
//This allows us to support min-width, max-width, nowrap, etc.
$header.css("position", "relative");
$footer.css("position", "relative");
//Navigate thru each cell hard coding the width so when the association
//is broken all of the columns will continue to align based on normal
//table rules. Only traverse the first row cells in the body for efficiency.
$body.first("tr").find("th, td").each(function (i, c) { $(c).css("width", GetWidth(c)); });
$header.find("th, td").each(function (i, c) { $(c).css("width", GetWidth(c)); });
$footer.find("th, td").each(function (i, c) { $(c).css("width", GetWidth(c)); });
//Enable positioning for fixed header positioning.
$header.css("position", "absolute");
$footer.css("position", "absolute");
$Table.css("width", $Scroll.width() - ScrollBarWidth - 3);
//Position Heading Based on Height of Heading
$Scroll.css("margin-top", ($Head.height() + 1) + "px");
$Head.css("margin-top", (($Head.height() - 1) * -1) + "px");
//Position Footer Based on Height of Scroll Host
$Scroll.css("margin-bottom", $Foot.css("height"));
$Foot.css("margin-top", $Scroll.height() - 1 + "px");
});
};
function GetWidth(c) {
var dWidth = $(c).attr(style);
return ((dWidth != null) && (dWidth.length > 0)) ? dWidth : $(c).css(style);
};
$(document).ready(function() { ReSizeScrollTables(); });
$(window).resize(function() { ReSizeScrollTables(); });
Да было бы хорошим решением, однако я должен быть в состоянии иметь это как 1 таблицы, а не 2, потому что мы скрыли формы внутри скрыты
.vScroll td: first-child {border-left: none; позиция: фиксированная; background-color: white; } .vScroll th: first-child {border-left: none; позиция: фиксированная; } – VoidVolker
Ahhh, похоже, работает прекрасным, не уверенным в IE7/8, но ему придется исправить это, когда я его проверю. Есть ли способ сделать их встроенными с другими ячейками и полным белым фоном? http://jsfiddle.net/FSv9Y/1/ - обновляется с вашими изменениями css, будет ли это более кросс-браузер, который вы думаете, если мы каким-то образом будем в JS? –
Смежные вопросы