如何在HTML中的表格里,实现双向滚动条

html-css010

如何在HTML中的表格里,实现双向滚动条,第1张

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

题注的问题我不是很明白,双线的代码是这样的

<HR style="border:3 double #987cb9" width="80%" color=#987cb9 SIZE=3>

HTML(Hypertext Markup Language)全称是“超文本标记语言”,通过使用标记来描述文档结构和表现形式的一种语言,由浏览器阅读网页后对网页后台代码也称源码进行逐行解析,然后把解析结果在网页上进行显示组合。所谓超文本,因为它可以加入图片、声音、动画、影视等内容,因为它可以从一个文件跳转到另一个文件,与互联网上的服务器的网页文件链接。形成Internet网络中基本服务之一的—万维网。HTML是构成网页的基础,用户打开所有网页都离不开HTML,所以学习HTML是学习网页制作、网站建设的基础。