Запретить прокрутку одного столбца в таблице

Ок волшебники, кто-то знает, как это сделать...

У меня очень сложный пользовательский элемент управления, который отображает информацию о доступности для x числа людей (может быть 1 может быть 100). календарь отображает любой заданный диапазон дат, как указано в свойствах управления.

Это означает, что элемент управления может быть очень длинным, и все эти данные отображаются в виде таблицы html.

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

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

<table>
  <tr><td></td><td colspan='31'>Jan</td><td colspan='28'>feb</td>...</tr>
  <tr><td></td><td>1</td><td>2</td><td>3</td> ...<tr/>
  <tr><td>Person 1</td><td></td><td></td><td>Busy</td> ...<tr/>
  <tr><td>Person 2</td><td></td><td>Busy</td><td>Busy</td> ...<tr/>
</table>

В случае, если это полезно, это приложение С# (asp.net), и я открыт для использования javascript, если это необходимо.

спасибо, ребята:)

Ответ 1

Хорошо, поэтому, основываясь на приведенной выше таблице, я уже должен был предположить, что фиксированный столбец будет иметь фиксированную ширину, но мне удалось это сделать...

<div style="position:relative;">
    <div style="width:100%; overflow:scroll; height:400px;">

<table style="margin-left:100px;">
  <tr><td style="position:absolute;"></td><td colspan='31'>Jan</td><td colspan='28'>feb</td>...</tr>
  <tr><td style="position:absolute;"></td><td>1</td><td>2</td><td>3</td> ...<tr/>
  <tr><td style="position:absolute;">Person 1</td><td></td><td></td><td>Busy</td> ...<tr/>
  <tr><td style="position:absolute;">Person 2</td><td></td><td>Busy</td><td>Busy</td> ...<tr/>
</table>

    </div>
</div>

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

<style type="text/css">
    .Calendar                   { max-height:400px; border-collapse:collapse; table-layout:fixed; margin-left:105px; }
    .Calendar .Resources  { width:100px; position:absolute; left:0px; background:white; }
    .Calendar tr                { vertical-align:top; }
    .Calendar td               { border:solid 1px black; vertical-align:top; padding:2px; border:solid 1px  #EFEFEF; }
    .Calendar .day            { background:#FFFBD6; border:solid 1px #FEEFB3; }
    .Calendar .dayWithEvent   { background:white; border:solid 1px #FEEFB3; border-top:solid 1px blue; }
</style>

<div style="position:relative;">
    <div style="width:100%; overflow:scroll; height:400px;">
        <table class="Calendar">
            <asp:Repeater ID="ui_calMonths" runat="server" onitemdatabound="ui_calMonths_ItemDataBound">
                    <HeaderTemplate>
                        <tr><td class="Resources" style="background:white; border:none;">&nbsp;</td>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <td colspan='<%# ((Month)Container.DataItem).Days.Length %>'><%# Eval("Name") %></td>
                    </ItemTemplate>
                    <FooterTemplate>
                        </tr>
                        <tr><td class="Resources" style="background:white; border:none;">&nbsp;</td>
                            <asp:Repeater ID="ui_calDays" runat="server">
                                <ItemTemplate>
                                    <td><%# ((DateTime)Container.DataItem).ToString("dd") %></td>
                                </ItemTemplate>
                            </asp:Repeater>
                        </tr>
                    </FooterTemplate>
                </asp:Repeater> 
            <asp:Repeater ID="ui_grdResources" runat="server">
                <HeaderTemplate><tr></HeaderTemplate>
                <ItemTemplate>
                    <td class="Resources"><%# Eval("Text") %></td>
                    <%# ResourceEvents(((RowContext)Container.DataItem)) %>
                </ItemTemplate>
                <FooterTemplate></tr></FooterTemplate>
            </asp:Repeater>
        </table>    
    </div>
</div>

в основном codebehind определяет количество ячеек, отображаемых в каждой строке (репитеры являются фундаментальными в этой работе, но результат по существу является красиво отформатированной таблицей, которая содержит имена месяцев для данного диапазона дат в первой строке, дни за те месяцы во втором, а в третьем - фиксированный столбец, содержащий имена и динамически заполненные из моих внутренних элементов календаря API... очень круто!!!

Ответ 2

Вот решение Markku Uttula, которое делает это с помощью комбинации CSS и HTML (см. ниже). На мой взгляд, работает с разумной производительностью даже на IE6. V. впечатляющая работа. По какой-то причине полосы прокрутки в Chrome, Opera и Firefox попадают под замороженные столбцы/строки, но, надеюсь, бары достаточно велики, чтобы это не было проблемой...

CSS

body { margin: 0; height: 100% }
.b { border-collapse: collapse }
.b td { border: 1px solid #f80; vertical-align: top }
p { margin: 1px; padding: 0; font-size: 9px; font-family: Arial }
p.c { text-align: center; font-size: 12px }
p span { font-size: 12px; white-space:nowrap; color: #888 }
/* TopLeft fixed corner */
td.bg101 { background-color: #ffc }
/* Top fixed rows */
td.bg000 { background-color: #f8c }
td.bg001 { background-color: #f4c }
/* Left fixed rows */
td.bg110 { background-color: #fcc }
td.bg111 { background-color: #fcf }
/* The scrollable content area */
td.bg010 { background-color: #fff }
td.bg011 { background-color: #ff4 }

JavaScript:

var ieBug = ((document.all) && (!window.opera)); // IE doesn't really handle fixed elements well :)
var fpElement = false;
function fpCW() { return document.documentElement ? document.documentElement.clientWidth : document.clientWidth; }
function fpCH() { return document.documentElement ? document.documentElement.clientHeight : document.clientHeight; }
function fpTopLeft(elementNode, iTop, iLeft) {
    elementNode.style.top = (iTop)+"px";
    elementNode.style.left = (iLeft)+"px";
}
function fpDefaults(elementNode) {
    elementNode.style.position = ieBug ? "absolute" : "fixed";
    fpTopLeft(elementNode,0,0);
    return elementNode;
}
function fpClone(elementNode, cloneZindex) {
    var clone = fpDefaults(elementNode.cloneNode(true));
    clone.style.background = "#fff";
    clone.style.overflow = "hidden";
    clone.style.border = "none";
    clone.style.zIndex = cloneZindex;
    return clone;
}
function fpInitFreezePanes(fpTableElementId, fpTableContainerDivElementId, fpPivotCellId, fpDisableBodyScrollbars) {
    if (fpElement !== false) {
      alert("Page already contains an element with fixed panes.");
    } else {
        var fpTableElement = document.getElementById(fpTableElementId);
        var fpTableContainerDivElement = document.getElementById(fpTableContainerDivElementId);
        var fpPivotCell = document.getElementById(fpPivotCellId);
        if ((!fpTableElement) || (!fpTableContainerDivElement) || (!fpPivotCell)) {
            alert("Unable to find table, container or pivoting cell?");
        } else {
            fpElement = fpTableContainerDivElement;
            if (fpDisableBodyScrollbars) {
                var x = document.getElementsByTagName("body")[0];
                x.style.overflow = "hidden";
                x = document.getElementsByTagName("html")[0];
                x.style.overflow = "hidden";
            }
            fpTableContainerDivElement = fpDefaults(fpTableContainerDivElement);
            fpTableContainerDivElement.style.width = (fpCW()-2)+"px";
            fpTableContainerDivElement.style.height = (fpCH()-2)+"px";
            fpTableContainerDivElement.fpPT = fpPivotCell.offsetTop;
            fpTableContainerDivElement.fpPL = fpPivotCell.offsetLeft;

            var copy1 = fpClone(fpTableContainerDivElement, 4);
            copy1.style.width = (fpTableContainerDivElement.fpPL)+"px";
            copy1.style.height = (fpTableContainerDivElement.fpPT)+"px";
            var copy2 = fpClone(fpTableContainerDivElement, 3);
            copy2.style.width = (fpTableElement.offsetWidth)+"px";
            copy2.style.height = (fpTableContainerDivElement.fpPT)+"px";
            var copy3 = fpClone(fpTableContainerDivElement, 2);
            copy3.style.width = (fpTableContainerDivElement.fpPL)+"px";
            copy3.style.height = (fpTableElement.offsetHeight)+"px";

            fpTableContainerDivElement.style.zIndex = 1;
            fpTableContainerDivElement.appendChild(copy1);
            fpTableContainerDivElement.copy1 = copy1;
            fpTableContainerDivElement.appendChild(copy2);
            fpTableContainerDivElement.copy2 = copy2;
            fpTableContainerDivElement.appendChild(copy3);
            fpTableContainerDivElement.copy3 = copy3;
            fpTableContainerDivElement.repositioning = false;
            fpTableContainerDivElement.oldST = -1;
            fpTableContainerDivElement.oldSL = -1;
            fpTableContainerDivElement.style.overflow = "scroll";

            /* JUST SOME STYLING HERE */
            copy1.style.borderRight = "1px dashed #000";
            copy1.style.borderCollapse = "collapse";
            copy2.style.borderBottom = "1px dashed #000";
            copy2.style.borderCollapse = "collapse";
            copy3.style.borderRight = "1px dashed #000";
            copy3.style.borderCollapse = "collapse";
            /* JUST SOME STYLING HERE */

            // if (ieBug) {
            if (fpTableContainerDivElement.style.setExpression) {
                function fpIeBugFix(elementNode, containerNodeId, arrayOfExpressionsToSet) {
                    for (var i in arrayOfExpressionsToSet) {
                        if (arrayOfExpressionsToSet[i][2]) {
                            elementNode.style.setExpression(arrayOfExpressionsToSet[i][0], arrayOfExpressionsToSet[i][1]+"document.getElementById('"+containerNodeId+"')."+arrayOfExpressionsToSet[i][2]+"+'px'");
                        } else {
                            elementNode.style.setExpression(arrayOfExpressionsToSet[i][0], arrayOfExpressionsToSet[i][1]);
                        }
                    }
                }
                fpIeBugFix(fpTableContainerDivElement.copy3, fpTableContainerDivElementId, [["top","","scrollTop"],["left","","scrollLeft"],["marginTop","-","scrollTop"]]);
                fpIeBugFix(fpTableContainerDivElement.copy2, fpTableContainerDivElementId, [["top","","scrollTop"],["left","","scrollLeft"],["marginLeft","-","scrollLeft"]]);
                fpIeBugFix(fpTableContainerDivElement.copy1, fpTableContainerDivElementId, [["top","","scrollTop"],["left","","scrollLeft"]]);
                fpIeBugFix(fpTableContainerDivElement, fpTableContainerDivElementId, [["width","fpCW()+'px'"],["height","fpCH()+'px'"]]);
                document.recalc(true);
            } else {
                fpElement.onmousemove = fpElement.onscroll = function() {
                    if (!this.repositioning) {
                        this.repositioning = true;
                        var st = this.scrollTop;
                        var sl = this.scrollLeft;
                        if ((this.oldST != st) || (this.oldSL != sl)) {
                            this.oldST = st;
                            this.oldSL = sl;
                            // this.copy3.previousDisplay = this.copy3.style.display;
                            // this.copy3.style.display = "none";
                            this.copy3.style.marginTop = "-"+(st)+"px";
                            // this.copy3.style.display = this.copy3.previousDisplay;
                            // this.copy2.previousDisplay = this.copy2.style.display;
                            // this.copy2.style.display = "none";
                            this.copy2.style.marginLeft = "-"+(sl)+"px";
                            // this.copy2.style.display = this.copy2.previousDisplay;
                        }
                        fpElement.repositioning = false;
                    }
                };
                window.onresize = function() {
                    fpElement.style.width = fpCW()+"px";
                    fpElement.style.height = fpCH()+"px";
                }
            }
        }
    }
}

Ответ 3

получить плагин jquery datatables fixedcolumns

http://datatables.net/extras/fixedcolumns/