纯CSS/HTML/Javascript 2D滚动表，具有固定的列和标题_Javascript_Css

纯CSS/HTML/Javascript 2D滚动表，具有固定的列和标题

javascript css

纯CSS/HTML/Javascript 2D滚动表，具有固定的列和标题,javascript,css,Javascript,Css,我有一个大桌子，可能需要水平和垂直滚动。我已经看到了很多解决方案，但还没有找到一个不依赖jscript或类似的解决方案。这似乎是可行的，但我遇到了一些问题。我想我可以得到标题行，但我有固定列的问题。我似乎无法让我的身体延伸到视口之外，我的代码在IE8和Firefox上的呈现方式也非常不同。有人能给我一些指导吗 <html> <head> <script type="text/javascript"> function windowwidth(){

我有一个大桌子，可能需要水平和垂直滚动。我已经看到了很多解决方案，但还没有找到一个不依赖jscript或类似的解决方案。这似乎是可行的，但我遇到了一些问题。我想我可以得到标题行，但我有固定列的问题。我似乎无法让我的身体延伸到视口之外，我的代码在IE8和Firefox上的呈现方式也非常不同。有人能给我一些指导吗

<html>
<head>
<script type="text/javascript">

function windowwidth(){
    var myWidth = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        myWidth = window.innerWidth; 
    } else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
        myWidth = document.documentElement.clientWidth; 
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        myWidth = document.body.clientWidth; 
    }
    return myWidth ;
}

function windowheight(){
    var myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
        myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        myHeight = document.body.clientHeight;
    }
    return myHeight ;
}

function pageloader(){

var leftwidth=document.getElementById('left').offsetWidth;
document.getElementById('right').style.marginLeft=leftwidth+'px';

}
</script>

<style>

div{ border:solid; }
.left{ position:absolute; }
.right{ position:float-left; margin-left:50px;}
table,td{ border:solid; }
td{ width:200px; }
tr{ height:50px; }

</style>

</head>
<body onload='pageloader();'>

<div name=left id=left class=left>
<table>
<tr><td>0</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
</table>
</div>
<div name=right id=right class=right>
<table>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</div>
</body>
</html>


函数windowwidth（）{
var myWidth=0；
if（typeof（window.innerWidth）=“number”）{
myWidth=window.innerWidth；
}else if（document.documentElement&（document.documentElement.clientWidth | | document.documentElement.clientHeight））{
myWidth=document.documentElement.clientWidth；
}else if（document.body&（document.body.clientWidth | | document.body.clientHeight））{
myWidth=document.body.clientWidth；
}
返回myWidth；
}
函数windowheight（）{
var myHeight=0；
if（typeof（window.innerWidth）=“number”）{
myHeight=window.innerHeight；
}else if（document.documentElement&（document.documentElement.clientWidth | | document.documentElement.clientHeight））{
myHeight=document.documentElement.clientHeight；
}else if（document.body&（document.body.clientWidth | | document.body.clientHeight））{
myHeight=document.body.clientHeight；
}
返回我的高度；
}
函数pageloader（）{
var leftwidth=document.getElementById（'left'）.offsetWidth；
document.getElementById（'right'）.style.marginLeft=leftwidth+'px'；
}
div{边框：实心；}
.左{位置：绝对；}
.right{位置：左浮动；左边距：50px；}
表，td{border:solid；}
td{宽度：200px；}
tr{高度：50px；}
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9

我进一步研究了它，并提出了这个解决方案。它工作得非常好，甚至非常灵活。我认为这是我见过的最好的解决办法。请让我知道，如果你知道更好的东西或知道一个方法来改善它

我发现唯一无法修复的是垂直对齐，它必须位于顶部。有谁知道一个像样、简单的解决方案可以让IE8尊重td的垂直对齐中心和高度

以下是演示：

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

function pageloader(){
// get sizes of boxes
var leftys=document.getElementById('left').getElementsByTagName('td');
var lefty=leftys[0];
var barys=document.getElementById('topbar').getElementsByTagName('td');
var bary=barys[0];
var boxys=document.getElementById('topleft').getElementsByTagName('td');
var boxy=boxys[0];
var leftwidth=lefty.offsetWidth;
var topheight=bary.offsetHeight;
var boxwidth=boxy.offsetWidth;
var boxheight=boxy.offsetHeight;
if(topheight>boxheight){
var newtopheight=topheight;
var newinnerheight=bary.clientHeight-parseInt(getStyle(bary, "padding-top"))-parseInt(getStyle(bary, "padding-bottom"));
}else{
var newtopheight=boxheight;
var newinnerheight=boxy.clientHeight-parseInt(getStyle(boxy, "padding-top"))-parseInt(getStyle(boxy, "padding-bottom"));
}
// set new width for left column
if(leftwidth>boxwidth){
var newleftwidth=leftwidth;
var newinnerwidth=lefty.clientWidth-parseInt(getStyle(lefty, "padding-left"))-parseInt(getStyle(lefty, "padding-right"));
}else{
var newleftwidth=boxwidth;
var newinnerwidth=boxy.clientWidth-parseInt(getStyle(boxy, "padding-left"))-parseInt(getStyle(boxy, "padding-right"));
}
// apply widths and heights and margins
// alert ("newleftwidth: "+newleftwidth+" newtopheight: "+newtopheight+"\nnewinnerheight: "+newinnerheight+" newinnerwidth: "+newinnerwidth);
boxy.style.height=newinnerheight+'px';
bary.style.height=newinnerheight+'px';
boxy.style.width=newinnerwidth+'px';
lefty.style.width=newinnerwidth+'px';
document.getElementById('left').style.marginTop=newtopheight+'px';
document.getElementById('topbar').style.marginLeft=newleftwidth+'px';
document.getElementById('right').style.marginLeft=newleftwidth+'px';
document.getElementById('right').style.marginTop=newtopheight+'px';

// fix column widths and rowheights
colsync();
rowsync();

calcright();
// alert ("leftwidth: "+newleftwidth+" topheight: "+newtopheight);

}

function scrolling(){
if (window.pageXoffset) {
var xscroll=window.pageXoffset;
} else if (document.body.scrollLeft) {
var xscroll=document.body.scrollLeft;
} else if (document.body.parentElement.scrollLeft) {
var xscroll=document.body.parentElement.scrollLeft;
} else if (document.body.parentNode.scrollLeft) {
var xscroll=document.body.parentNode.scrollLeft;
} else {
var xscroll=0;
}
if (window.pageYoffset) {
var yscroll=window.pageYOffset;
} else if (document.body.scrollTop) {
var yscroll=document.body.scrollTop;
} else if (document.body.parentElement.scrollTop) {
var yscroll=document.body.parentElement.scrollTop;
} else if (document.body.parentNode.scrollTop) {
var yscroll=document.body.parentNode.scrollTop;
} else {
var yscroll=0;
}
var leftwidth=document.getElementById('left').offsetWidth;
var topheight=document.getElementById('topbar').offsetHeight;
var newleftmargin=leftwidth-xscroll;
var newtopmargin=topheight-yscroll;
document.getElementById('left').style.top=-yscroll+'px';
document.getElementById('topbar').style.left=-xscroll+'px';
}

function info(){
}

function calcright(){
// resize page to shrink to fit
var rchildrenr = document.getElementById('right').getElementsByTagName('tr');
var rchildrend = rchildrenr[1].getElementsByTagName('td');
var rcols = rchildrend.length;
var rsum = 0;
for (i=0;i<rchildrend.length;i++) {
rsum = rchildrend[i].offsetWidth;
}
document.getElementById('topbar').style.width=rchildrenr[1].offsetWidth+'px';
document.getElementById('right').style.width=rchildrenr[1].offsetWidth+'px';
}

function colsync(){
var topcells = document.getElementById('topbar').getElementsByTagName('td');
var rightrows = document.getElementById('right').getElementsByTagName('tr');
var rightcells = rightrows[1].getElementsByTagName('td');
var mypads=0;
for (i=0;i<topcells.length;i++) {
if (topcells[i].offsetWidth>rightcells[i].offsetWidth) {
mypads=parseInt(getStyle(rightcells[i], "padding-left"))+parseInt(getStyle(rightcells[i], "padding-right"));
rightcells[i].style.width=topcells[i].clientWidth-mypads+'px';
}else{
mypads=parseInt(getStyle(topcells[i], "padding-left"))+parseInt(getStyle(topcells[i], "padding-right"));
topcells[i].style.width=rightcells[i].clientWidth-mypads+'px';
}
}
}

function rowsync(){
var leftcells = document.getElementById('left').getElementsByTagName('td');
var rightrows = document.getElementById('right').getElementsByTagName('tr');
var mypads=0;
for (i=0;i<leftcells.length;i++) {
rightcells=rightrows[i].getElementsByTagName('td');
if (leftcells[i].offsetHeight>rightcells[i].offsetHeight) {
mypads=parseInt(getStyle(rightcells[i], "padding-top"))+parseInt(getStyle(rightcells[i], "padding-bottom"));
rightcells[i].style.height=leftcells[i].clientHeight-mypads+'px';
// if (i==1) alert (leftcells[i].clientHeight);
}else{
mypads=parseInt(getStyle(leftcells[i], "padding-top"))+parseInt(getStyle(leftcells[i], "padding-bottom"));
leftcells[i].style.height=rightcells[i].clientHeight-mypads+'px';
// if (i==1) alert (leftcells[i].clientHeight);
}
}
}

window.onscroll = scrolling;

</script>

<style>
body{ margin:0; }
div{ border:none; }
.left{ position:fixed; background-color:White; z-index:0;}
.topleft{ position:fixed; background-color:White; z-index:1;}
.topbar{ position:fixed; background-color:White; width:1000000px; z-index:0;}
.right{ position:absolute; margin-left:50px; width:1000000px; z-index:-1;}
table{ border:none; border-spacing:0px;}
td{ border:solid; border-width:1px; width:5px; padding:2px; vertical-align:top; text-align:center;}
tr{ height:5px; }

</style>

</head>
<body onload='pageloader();'> 

<div name=topleft id=topleft class=topleft onclick=info(); >
<table id=tabletable>
<tr><td>Fixed Block</td></tr>
</table>
</div>

<div name=left id=left class=left>
<table>
<tr><td>Row-0</td></tr>
<tr><td>Row-1</td></tr>
<tr><td>Row-2</td></tr>
<tr><td>Row-3</td></tr>
<tr><td>Row-4</td></tr>
<tr><td>Row-5</td></tr>
<tr><td>Row-6</td></tr>
<tr><td>Row-7</td></tr>
<tr><td>Row-8</td></tr>
<tr><td>Row-9</td></tr>
</table>
</div>

<div name=topbar id=topbar class=topbar>
<table>
<tr>
<td>Cola</td>
<td>Colb</td>
<td>Colc</td>
<td>Cold</td>
<td>Cole</td>
<td>Colf</td>
<td>Colg</td>
<td>Colh</td>
<td>Coli</td>
<td>Colj</td>
</tr>
</table>
</div>

<div name=right id=right class=right>
<table>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
<td>36</td>
<td>37</td>
<td>38</td>
<td>39</td>
</tr>
<tr>
<td>40</td>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
<td>46</td>
<td>47</td>
<td>48</td>
<td>49</td>
</tr>
<tr>
<td>50</td>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
<td>56</td>
<td>57</td>
<td>58</td>
<td>59</td>
</tr>
<tr>
<td>60</td>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
<td>66</td>
<td>67</td>
<td>68</td>
<td>69</td>
</tr>
<tr>
<td>70</td>
<td>71</td>
<td>72</td>
<td>73</td>
<td>74</td>
<td>75</td>
<td>76</td>
<td>77</td>
<td>78</td>
<td>79</td>
</tr>
<tr>
<td>80</td>
<td>81</td>
<td>82</td>
<td>83</td>
<td>84</td>
<td>85</td>
<td>86</td>
<td>87</td>
<td>88</td>
<td>89</td>
</tr>
<tr>
<td>90</td>
<td>91</td>
<td>92</td>
<td>93</td>
<td>94</td>
<td>95</td>
<td>96</td>
<td>97</td>
<td>98</td>
<td>99</td>
</tr>
</table>
</div>

</body>
</html>


函数getStyle（oElm、strcsRule）{
var strValue=“”；
if（document.defaultView&&document.defaultView.getComputedStyle）{
strValue=document.defaultView.getComputedStyle（oElm，“”）.getPropertyValue（strcsRule）；
}
else if（oElm.currentStyle）{
strcsrule=strcsrule.replace（/\-（\w）/g，函数（stratch，p1）{
返回p1.toUpperCase（）；
});
strValue=oElm.currentStyle[strcsRule]；
}
返回标准值；
}
函数pageloader（）{
//得到盒子的大小
var leftys=document.getElementById（'left'）.getElementsByTagName（'td'）；
var lefty=leftys[0]；
var barys=document.getElementById（'topbar'）.getElementsByTagName（'td'）；
var bary=barys[0]；
var-boxys=document.getElementById（'topleft'）.getElementsByTagName（'td'）；
var-boxy=boxys[0]；
var leftwidth=lefty.offsetWidth；
var topheight=巴里。偏离视线；
var boxwidth=boxy.offsetWidth；
var boxheight=方形。偏视；
如果（顶高>箱高）{
var newtophight=顶高；
var newinnerheight=bary.clientHeight parseInt（getStyle（bary，padding-top））-parseInt（getStyle（bary，padding-bottom））；
}否则{
var newtopheight=箱高；
var newinnerheight=boxy.clientHeight parseInt（getStyle（boxy，padding-top））-parseInt（getStyle（boxy，padding-bottom））；
}
//设置左栏的新宽度
如果（leftwidth>boxwidth）{
var newleftwidth=leftwidth；
var newinnerwidth=lefty.clientWidth parseInt（getStyle（lefty，padding left））-parseInt（getStyle（lefty，padding right））；
}否则{
var newleftwidth=boxwidth；
var newinnerwidth=boxy.clientWidth parseInt（getStyle（boxy，padding left））-parseInt（getStyle（boxy，padding right））；
}
//应用宽度、高度和边距
//警报（“newleftwidth:+newleftwidth+”newtopheight:+newtopheight+”\nWinnerHeight:+newinnerheight+“newinnerwidth:+newinnerwidth”）；
boxy.style.height=newinnerheight+'px'；
bary.style.height=newinnerheight+'px'；
boxy.style.width=newinnerwidth+'px'；
lefty.style.width=newinnerwidth+'px'；
document.getElementById（'left'）.style.marginTop=newtoPhight+'px'；
document.getElementById（'topbar'）.style.marginLeft=newleftwidth+'px'；
document.getElementById（'right'）.style.marginLeft=newleftwidth+'px'；
document.getElementById（'right'）.style.marginTop=newtoPhight+'px'；
//固定列宽和行高
colsync（）；
行同步（）；
calcright（）；
//警报（“leftwidth:+newleftwidth+”topheight:+NewToPhight）；
}
函数滚动（）{
if（window.pageXoffset）{
var xscroll=window.pageXoffset；
}else if（document.body.scrollLeft）{
var xscroll=document.body.scrollLeft；
}else if（document.body.parentElement.scrollLeft）{
var xscroll=document.body.parentElement.scrollLeft；
}else if（document.body.parentNode.scrollLeft）{
var xscroll=document.body.parentNode.scrollLeft；
}否则{
var xscroll=0；
}
if（window.pageYoffset）{
var yscroll=window.pageYOffset；
}else if（document.body.scrollTop）{
var yscroll=document.body.scrollTop；
}else if（document.body.parentElement.scrollTop）{
var yscroll=document.body.parentElement.scrollTop；
}else if（document.body.parentNode.scrollTop）{
var yscroll=document.body.parentNode.scrollTop；
}否则{
var yscroll=0；
}
var leftwidth=document.getElementById（'left'）.offsetWidth；
var topheight=document.getElementById（'topbar'）。offsetHeight；
var newleftmargin=leftwidth xscroll；
var newtopmargin=顶高yscroll；
document.getElementById（'left'）.style.top=-yscroll+'px'；
document.get