Javascript滚动表

我正在尝试创建一些可编辑数据的特定视图（对于时间表系统），我当前正在处理的部分需要以特定方式滚动。这不太可能需要垂直滚动，但需要水平移动。我将表格放在一个单独的div中，带有自动溢出功能，但我不知道如何继续。我将感谢任何帮助

按照要求，代码如下所示，但没有太多内容可显示。由于公司对服务器的限制，我无法访问任何CSS。行的内容由Javascript函数创建（此时，它只创建40个相同的

元素，宽度设置为30，整数值为1-40，以确保表格足够宽，需要滚动）。无论

元素的宽度设置为多少，div都只会压缩它们

<div id='TimeScroller' width='100%' style='overflow:auto;'>
    <table id='TimeData'>
        <tr id='Days' style='font-family: "Courier New", Courier, monospace; font-size: 11px;'>
        </tr>
    </table>
</div>

更新：我又遇到了这个问题。我尝试了下面列出的解决方案，但没有成功。相反，我设法找到了一种不需要这种滚动功能的方法。不幸的是，我的新项目需要我去解决它，所以我必须解决这个问题。我使用的代码如下：

<td>
    <div id='am_scheduleScroller' style='overflow: auto;'>
        <table id='am_scheduleDisplay' width='100%' border='0' cellpadding='0' cellspacing='0' style='empty-cells: show;'>
            <thead>
                <tr id='am_schedule_formatBar'></tr>
                <tr id='am_schedule_tableTitleBar'></tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</td>


var totalDays;

$(document).ready(function() {
    var today = new Date();
    $('#am_monthSelector_from').val(today.getMonth() + 1).prop('selected', true);
    $('#am_yearSelector_from').val(today.getFullYear()).prop('selected', true);

    getDates();
    loadData();
});


function getDates() {
    var moLen = new Array();
    var moSelFrom = $('#am_monthSelector_from').val();
    var moSelTo = $('#am_monthSelector_to').val();
    var yrSelFrom = $('#am_yearSelector_from').val();
    var yrSelTo = $('#am_yearSelector_to').val();
    var months = new Array();
    var firstDay;
    var firstDate = '';
    totalDays = 0;

    var mo = moSelFrom;
    var yr = yrSelFrom;
    // Grab the length of the previous month (for the weekly divisions)
    if(mo == 1) {
        mo = 12;
        yr--;
    } else
        mo--;

    // Collect month lengths
    var index = 0;
    while(yr < yrSelTo || mo < moSelTo) {
        months[index] = mo;
        moLen[index] = new Date(yr, mo, 0).getDate();
        if(mo == 12) {
            mo = 0;
            yr++;
        }
        mo++;
        index++;
    }
    months[index] = moSelTo;
    moLen[index] = new Date(yrSelTo, moSelTo, 0).getDate();


    // Decide first day for week listings (title row)
    firstDay = new Date(yrSelFrom, months[1], 1).getDay();
    if(firstDay != 1) {
        totalDays += +firstDay - 1;
        firstDay = (moLen[0] - firstDay) + 2;
        firstDate = months[0] + ' / ' + firstDay + ' / ' + yrSelFrom;
    } else
        firstDate = months[1] + ' / 1 / ' + yrSelFrom;

    for(var i = 1; i < moLen.length; i++) {
        totalDays += moLen[i];
    }

    // Schedule formatting row
    var dateList = '';
    for(var i = 0; i < totalDays; i++)
        dateList = dateList + '<td style="width:30px;"></td>';
    $('#am_schedule_formatBar').html(dateList);


    // Date row (divided into weeks)
    var moIndex = 1;
    var day = 8;
    yr = yrSelFrom;
    if(firstDay != 1) {
        day = 7 - (moLen[0] - firstDay);
    }
    dateList = '<td style="width:30px; border: 1px solid black; border-bottom: 2px solid black;" id="am_date_0" align="center" colspan="7">' + firstDate + '</td>';
    for(var i = 7; i < totalDays; i += 7) {
        dateList = dateList + '<td style="width:30px; border: 1px solid black; border-bottom: 2px solid black;" id="am_date_' + i + '" align="center" colspan="7">' + months[moIndex] + ' / ' + day + ' / ' + yr + '</td>';
        day += 7;
        if(day > moLen[moIndex]) {
            day = day - moLen[moIndex];
            if(moIndex == 12) {
                yr++;
                moIndex = 1;
            } else 
                moIndex++;
        }
    }

    $('#am_schedule_tableTitleBar').html(dateList);
    $('#am_resource_tableTitleBar').html('<td><b>Employee:</b></td>');
}


function loadData() {
    var data = '<tr>';

    for(var i = 0; i < totalDays; i++) {
        data = data + '<td align="center" id="am_sched_' + empID + '_' + date + '" align="center" style="border-bottom: 1px solid black;"></td>';
    }
    data = data + '</tr>';

    $('#am_scheduleDisplay tbody').html(data);
    $('#am_resourceList tbody').html('<tr><td>' + empID + ':' + empName + '</td></tr>');


    var startElt = $('#am_sched_' + empID + '_' + start);
    startElt
        .html('Out')
        .attr('colspan',length)
        .css('backgroundColor', '#00FFFF')
        .closest('tbody');


    var prevElt = startElt.next();
    startElt = prevElt.next();
    for(var i = 1; i < length; i++) {
        prevElt.remove();
        prevElt = startElt;
        startElt = startElt.next();
    }
}

var总天数；
$（文档）.ready（函数（）{
var today=新日期（）；
$（'am#monthSelector_from'）.val（today.getMonth（）+1.prop（'selected'，true）；
$（'am#yearSelector_from'）.val（today.getFullYear（））.prop（'selected'，true）；
getDates（）；
loadData（）；
});
函数getDates（）{
var moLen=新数组（）；
var moSelFrom=$（'am#monthSelector_from'）.val（）；
var moSelTo=$（'am#monthSelector_to'）.val（）；
var yrSelFrom=$（'am#u yearSelector_from'）.val（）；
var yrSelTo=$（'am#u yearSelector_to'）.val（）；
var months=新数组（）；
第一天；
var firstDate=“”；
总天数=0；
var mo=moSelFrom；
var yr=yrSelFrom；
//抓紧上个月的长度（每周分区）
如果（mo==1）{
mo=12；
yr--；
}否则
莫——；
//收集月长
var指数=0；
而（yr摩尔[moIndex]）{
日=日-摩尔[moIndex]；
if（moIndex==12）{
yr++；
moIndex=1；
}否则
moIndex++；
}
}
$（'am#u schedule_tablettlebar'）.html（日期列表）；
$（'am#u resource_tabletibar'）.html（'Employee:'）；
}
函数loadData（）{
var数据=“”；
对于（变量i=0；i

任何帮助都将不胜感激。谢谢

这应该有效：

<div id='TimeScroller'style='overflow:auto;width:100%'>
    <table id='TimeData' style="table-layout:fixed; width:100%">
        <tr id='Days' style='font-family: "Courier New", Courier, monospace; font-size: 11px;'>
        </tr>
    </table>
</div>

添加一些代码，这样我们可以帮助pleaseTry。您的表已经在DIV中，溢出：auto-如果它比DIV大-不会出现滚动条？请在此处发布您的代码。这种方法有效，但我无法使用。我不能为这个应用程序使用固定的大小，因为它需要调整到不同的窗口大小。此外，它会导致忽略

td

元素中的宽度设置-它们会自动填充div，并且指定的元素宽度不会强制div滚动。您可能必须使用客户端代码根据当前窗口宽度自动调整div的大小，如果您希望滚动正常，则不能使用百分比。关于

td

-是否在样式中使用

width

属性或width？我对

元素使用width样式。尝试为您的表格指定

style=“表格布局：固定；宽度：100%”

。我想现在你也可以给出你的DIV样式宽度：100%（用完整的标记更新了我的答案）