HTML中给表格添加滚动条问题

html-css09

HTML中给表格添加滚动条问题,第1张

table设置overflow-x:auto,overflow-y:hidden

thead设置overflow:hidden

tbody设置overflow-y:hidden,overflow-x:hidden

还有就是你table要定宽高

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<HTML>

<HEAD>

<META http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<TITLE>图片无缝滚动效果</TITLE>

<STYLE type="text/css">

#scrollImg{overflow:hiddenwidth:630pxheight:autoborder:1px solid #000000float:left}

</STYLE>

</HEAD>

<BODY>

<DIV id="scrollImg">

<TABLE cellspacing=0 cellpadding=0 align=left border=0>

<TBODY>

<TR>

<TD id="scrollImg1">

<TABLE height="100%" width="630" border=0>

<TBODY>

<TR>

<TD><IMG name="img1" src="" width="120" height="90" alt="" style="background-color: #D4D0C8"></TD>

<TD><IMG name="img2" src="" width="120" height="90" alt="" style="background-color: #D4D0C8"></TD>

<TD><IMG name="img3" src="" width="120" height="90" alt="" style="background-color: #D4D0C8"></TD>

<TD><IMG name="img4" src="" width="120" height="90" alt="" style="background-color: #D4D0C8"></TD>

<TD><IMG name="img5" src="" width="120" height="90" alt="" style="background-color: #D4D0C8"></TD>

<TD><IMG name="img6" src="" width="120" height="90" alt="" style="background-color: #D4D0C8"></TD>

<TD><IMG name="img7" src="" width="120" height="90" alt="" style="background-color: #D4D0C8"></TD>

<TD><IMG name="img8" src="" width="120" height="90" alt="" style="background-color: #D4D0C8"></TD>

</TR>

</TBODY>

</TABLE>

</TD>

<TD id="scrollImg2"></TD>

</TR>

</TBODY>

</TABLE>

<SCRIPT type=text/javascript LAGUAGE="javascript">

<!--

var leftspeed = 30//滚动速度，数值越大，滚动越慢

document.getElementById("scrollImg2").innerHTML = document.getElementById("scrollImg1").innerHTML

function MarqueeLeft(){

if(document.getElementById("scrollImg2").offsetWidth-document.getElementById("scrollImg").scrollLeft<=0)

document.getElementById("scrollImg").scrollLeft-=document.getElementById("scrollImg1").offsetWidth

else{

document.getElementById("scrollImg").scrollLeft++

}}

var MyMarleft = setInterval(MarqueeLeft, leftspeed)

document.getElementById("scrollImg").onmouseover=function() {clearInterval(MyMarleft)}

document.getElementById("scrollImg").onmouseout=function() {MyMarleft=setInterval(MarqueeLeft,leftspeed)}

//-->

</SCRIPT>

</DIV>

</BODY>

</HTML>

<html>

<head>

<title>My table</title>

<style>

.table0 {

    height:90%

}

.table0 caption{

    width:100%

    height:26px

    line-height:26px

    font-size:20px

    font-color:black

    font-weight:900

    letter-spacing:5px

}

.table0 thead td {

    text-align:center

    vertical-align:middle

    height:20px

    line-height:18px

    font-size:14px

    font-color:black

    font-weight:bold

    padding-top:2px

    padding-bottom:2px

    border:#555 1px solid

    margin:0px

}

.table0 tfoot td{

    text-align:left

    vertical-align:middle

    height:20px

    line-height:18px

    font-size:12px

    font-color:black

    font-weight:bold

    padding-top:2px

    padding-bottom:2px

    padding-left:12px

    padding-right:12px

    border:#555 1px solid

}

.table0 tbody td {

    width:100%

    height:auto

    border:#555 1px solid

    padding:0px

    margin:0px

}

.table1 tbody td {

    text-align:left

    vertical-align:middle

    height:20px

    line-height:18px

    font-size:14px

    font-color:#444

    font-weight:normal

    padding-top:2px

    padding-bottom:2px

    padding-left:12px

    padding-right:12px

    border-right:#555 1px solid

    border-bottom:#555 1px solid

    overflow:hidden

    text-overflow:ellipsis

    word-break:keep-all

    word-wrap:normal

}

</style>

<script>

function init(){

    theT=createTable("我的收藏夹",["Group:150","Name:300","URL:200","Visited:100","Modify:100","Delete:100"])

    //参数说明:createTable(strCaption,colHeads)

    //strCaption 标题

    //colHeads 是一个array,每个item的格式是 名称:宽度 的字符串

    for(var i=0i<40i++){

        theR=theT.insertRow()

        for(var j=0j<7j++){

            theC=theR.insertCell()

            theC.innerText=j

        }

    }

}

function createTable(strCaption,colHeads){

    //参数说明:colHeads 是一个array,每个item的格式是 名称:宽度 的字符串

    //生成表格

    oTable=document.createElement("table")

    document.body.insertBefore(oTable)

    //设置class

    oTable.className="table0"

    with(oTable.style){

        tableLayout="fixed"

        borderCollapse="collapse"

        borderSpacing="0px"

    }

    //设置变量

    oTCaption=oTable.createCaption()

    oTHead=oTable.createTHead()

    oTFoot=oTable.createTFoot()

    //生成标题

    oTCaption.innerText=strCaption

    //设置列宽

    oTHead.insertRow()

    for(var i=0i<colHeads.lengthi++){

        tHeadName=colHeads[i].split(":")[0]

        tHeadWidth=isNaN(parseInt(colHeads[i].split(":")[1]))?"auto":parseInt(colHeads[i].split(":")[1])

        theCell=oTHead.rows[0].insertCell()

        theCell.style.width=tHeadWidth

    }

    theCell=oTHead.rows[0].insertCell()

    theCell.width=20

    oTHead.rows[0].style.display="none"

    //生成表头

    oTHead.insertRow()

    for(var i=0i<colHeads.lengthi++){

        tHeadName=colHeads[i].split(":")[0]

        tHeadWidth=isNaN(parseInt(colHeads[i].split(":")[1]))?"auto":parseInt(colHeads[i].split(":")[1])

        theCell=oTHead.rows[1].insertCell()

        theCell.innerText=tHeadName

        theCell.style.width=tHeadWidth

    }

    theCell=oTHead.rows[1].insertCell()

    theCell.width=24

    //生成表脚

    oTFoot.insertRow()

    theCell=oTFoot.rows[0].insertCell()

    theCell.innerHTML="<marquee scrollDelay=50 scrollAmount=2>Copy rights 2005. Hutia presents.</marquee>"

    theCell=oTFoot.rows[0].insertCell()

    theCell.colSpan=colHeads.length-1

    theCell=oTFoot.rows[0].insertCell()

    theCell.width=20

    //生成主体

    oTable.all.tags("Tbody")[0].insertRow()

    theCell=oTable.all.tags("Tbody")[0].rows[0].insertCell()

    theCell.colSpan=colHeads.length+1

    oMain=document.createElement("DIV")

    theCell.insertBefore(oMain)

    with(oMain.style){

        width="100%"

        height="100%"

        overflowY="auto"

        overflowX="hidden"

        margin="0px"

        marginLeft="-1px"

    }

    oTBody=document.createElement("table")

    oMain.insertBefore(oTBody)

    oTable.oTBody=oTBody

    //禁止选择

    oTCaption.onselectstart=oTHead.onselectstart=oTFoot.onselectstart=function(){return(false)}

    //设置class

    oTBody.className="table1"

    with(oTBody.style){

        width=oTable.offsetWidth-15

        tableLayout="fixed"

        borderCollapse="collapse"

        borderSpacing="0px"

        padding="0px"

        margin="0px"

    }

    //初始化列宽

    oTBody.insertRow()

    for(var i=0i<colHeads.lengthi++){

        tHeadWidth=isNaN(parseInt(colHeads[i].split(":")[1]))?"auto":parseInt(colHeads[i].split(":")[1])

        theCell=oTBody.rows[0].insertCell()

        theCell.style.width=tHeadWidth

    }

    oTBody.rows[0].style.display="none"

    return(oTBody)

}

function insertRow(){

    var intL=oTBody.rows.length

    theRow=oTBody.insertRow()

    theRow.index=intL

    theRow.onmouseover=rowOnMouseOver

    theRow.onmouseout=rowOnMouseOut

    theRow.onclick=rowOnClick

    for(var i=0i<colHeads.lengthi++){

        theCell=theRow.insertCell()

        theCell.tabIndex=0

        theCell.hideFocus=true

        theCell.colIndex=i

        theCell.onmouseover=function(){this.focus()}

        theCell.onmouseout=cellOnBlur

        theCell.onfocus=cellOnFocus

        theCell.onblur=cellOnBlur

    }

    theRow.cells[0].innerText=strGroup?strGroup:"ROOT"

    theRow.cells[1].innerText=strName?strName:"Untitled Document."

    theRow.cells[2].innerText=strURL?strURL:"Unspecified URL"

    theRow.cells[3].innerHTML=strVisited?"Yes".fontcolor("red"):"Unknow"

    theRow.cells[4].innerHTML=strModify?"Yes".fontcolor("red"):"No".fontcolor("Green")

    theRow.cells[5].innerHTML="Delete".fontcolor("red")

}

</script>

</head>

<body onload="init()">

</body>

</html>