在表中单列的prevent滚动 [英] Prevent scrolling of a single column in a table

问题描述

好向导，有人知道如何做到这一点...

Ok wizards, someone knows how to do this ...

我必须呈现为人们x个可用性的信息非常复杂的自定义控制（可能是1可能是100）。
在控制属性中指定的日历使得任何给定的日期范围。

I have a very complex custom control that renders the availability information for x number of people (could be 1 could be 100). the calendar renders any given date range as specified in the control properties.

这意味着该控件具有潜力成为很长，所有这些数据呈现为一个HTML表格。

What this means is that the control has the potential to be very long and all this data is rendered as a html table.

通过每个人的名字出现在第一列即时通讯寻求解决该列，让表滚动其余水平，使用户可以通过浏览器全方位的日期，但保持可见人的名字。

With each persons name appearing in the first column im looking to fix that column and let the rest of the table scroll horizontally so the user can browser through the full range of dates but keep visible the people names.

让我怎么修复表代替第一列，看起来像下面...

so how do i fix the first column in place in table that looks something like the code below ...

<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>

在情况下，它是有帮助的任何方式，这是一个C＃应用程序（asp.net），我开到如果需要使用javascript。

In case it's helpful in any way this is a C# app (asp.net) and i am open to using javascript if required.

感谢家伙：）

推荐答案

因此​​基于好上面这个表我已经有我不得不承担固定柱将有一个固定的宽度，但我设法做到这一点...

Ok so based on the table above that i already have i had to assume the fixed column would have a fixed width but i managed to do this ...

<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>

这导致采取左侧的绝对位置的标记的细胞和表保持滚动...
做一点工作，需要把它清理干净，并使它看起来pretty但本质上我的code时提取出这个样子的......

this results in the marked cells taking an absolute position on the left and the table remains scrollable ... A little work is required to clean it up and make it look pretty but essentially my code when extracted out looks like this ...

<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日历项目的动态填充...非常凉爽!!!

basically the codebehind figures out how many cells to render in each row (the repeaters are fundamental in this working but the result is essentially a nicely formatted table which contains the month names for the given date range in the first row, the days for those months in the second and in the third a fixed column containing the names and the dynamically populated from my internal API calendar items ... very cool !!!

这篇关于在表中单列的prevent滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！