1、
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<!-- http://www.cnblogs.com/dacuotecuo/p/3657779.html -->
<script type="text/javascript" >
window.onload = function()
{
//DivPiao_relativePosition();
DivPiao_marginTop();
};
// divPiao使用的是相对位置(相对于原来应该出现的位置而言)
// 计算divPiao的相对位置，使之正好覆盖在 tableZouShi的表面
function DivPiao_relativePosition()
{
var divPiao = document.getElementById("divPiao");
var tableZouShi = document.getElementById("tableZouShi");
var rtTable = tableZouShi.getBoundingClientRect();
var rtPiao = divPiao.getBoundingClientRect();
var iJianGe = rtPiao.top - (rtTable.top + rtTable.height);// tableZouShi底部 和 divPiao顶部 之间的间隔
divPiao.style.top = - (rtTable.height + iJianGe) + "px";
/*
console.log("rtTable.top : "+rtTable.top);
console.log("rtTable.height : "+rtTable.height);
console.log("rtPiao.top : "+rtPiao.top);
console.log("iJianGe : "+iJianGe);
console.log("divPiao.style.top : "+divPiao.style.top);
*/
}
function DivPiao_marginTop()
{
var divPiao = document.getElementById("divPiao");
var tableZouShi = document.getElementById("tableZouShi");
var rtTable = tableZouShi.getBoundingClientRect();
var rtPiao = divPiao.getBoundingClientRect();
var iJianGe = rtPiao.top - (rtTable.top + rtTable.height);// tableZouShi底部 和 divPiao顶部 之间的间隔
divPiao.style.marginTop = - (rtTable.height + iJianGe) + "px";
divPiao.style.height = rtTable.height + "px";
/*
console.log("rtTable.top : "+rtTable.top);
console.log("rtTable.height : "+rtTable.height);
console.log("rtPiao.top : "+rtPiao.top);
console.log("iJianGe : "+iJianGe);
console.log("divPiao.style.top : "+divPiao.style.top);
*/
}
</script>
<style type="text/css">
.positionOffset {
/* margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
*/
}
.table01 {
border:1px solid black;
text-align: center;
font-size: small;
table-layout:fixed; /* 貌似这个属性也很关键，不设置的话，每个小格的宽度会不一样 */ /* 设置了该属性，每一小格格宽度不受其中内容的宽度影响(内容长度较长时，内容会跑到格子外面去...) */
white-space: nowrap;
width :1045px;/* 这个值要自己算: 单元格的宽度+边框的宽度。我这里手动设置了4个宽度，剩下的就留给系统自动去均分了 */
/* (手动设置)80+40*3 (每个小方框宽是26)+40*20 +(边框)45= */
}
.table01 .td01 {
width:40px;
}
.table01 td {
height:20px;
}
.table01 tr:not(:last-child) td:last-child {
border-bottom:1px solid black;
}
.table01 tr:not(:last-child) td:not(:last-child) {
border-right:1px solid black;
border-bottom:1px solid black;
}
.table01 tr:last-child td:not(:last-child) {
border-right:1px solid black;
}
.table01 tr:nth-child(1) td {
background-color: #0097C5;
color: white; /* 这样即可设置字体颜色 */
}
.table01 tr:nth-child(2) td {
font-weight:bold;
}
/* 下面两个，不知如何合并成一个... */
.table01 tr:not(:nth-child(1)):not(:nth-child(2)) td:nth-child(n+32):nth-child(-n+34) {
background-color: #D3DFF1;
}
.table01 tr:not(:nth-child(1)):not(:nth-child(2)) td:nth-child(1) {
background-color: #D3DFF1;
}
</style>
<div style="width:800px; height:450px; overflow: auto; background-color:silver;">
<table id="tableZouShi" class="table01 positionOffset" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" style="width:80px;">开奖号码</td><td colspan="10">百位</td><td colspan="10">十位</td><td colspan="10">个位</td>
<td rowspan="2" class="td01">组三</td><td rowspan="2" class="td01">组六</td><td rowspan="2" class="td01">豹子</td><td colspan="10">0-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>
<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>
<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>
<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>
<!--第1行-->
<td>6,1,0,0,2</td>
<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>
<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>
<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>
<td>组三</td><td>-</td><td>-</td>
<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>
<!--第2行-->
<td>5,3,6,5,7</td>
<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>
<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>
<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>
<td>-</td><td>组六</td><td>-</td>
<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>
<!--第3行-->
<td>4,8,4,4,5</td>
<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>
<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>
<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>
<td>组三</td><td>-</td><td>-</td>
<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>
<!--第4行-->
<td>7,6,5,0,9</td>
<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>
<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>
<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>
<td>-</td><td>组六</td><td>-</td>
<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>
<!--第5行-->
<td>9,0,7,3,2</td>
<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>
<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>
<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>
<td>-</td><td>组六</td><td>-</td>
<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>
<!--第6行-->
<td>7,1,5,3,7</td>
<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>
<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>
<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>
<td>-</td><td>组六</td><td>-</td>
<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>
<!--第7行-->
<td>7,4,6,3,8</td>
<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>
<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>
<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>
<td>-</td><td>组六</td><td>-</td>
<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>
<!--第8行-->
<td>4,9,4,5,9</td>
<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>
<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>
<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>
<td>-</td><td>组六</td><td>-</td>
<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>
<!--第9行-->
<td>3,4,6,6,4</td>
<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>
<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>
<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>
<td>组三</td><td>-</td><td>-</td>
<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>
<!--第10行-->
<td>4,8,4,0,1</td>
<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>
<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>
<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>
<td>-</td><td>组六</td><td>-</td>
<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>
<!--第11行-->
<td>8,2,1,1,5</td>
<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>
<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>
<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>
<td>组三</td><td>-</td><td>-</td>
<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>
<!--第12行-->
<td>3,3,0,4,7</td>
<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>
<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>
<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>
<td>-</td><td>组六</td><td>-</td>
<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>
<!--第13行-->
<td>8,3,4,3,9</td>
<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>
<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>
<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>
<td>-</td><td>组六</td><td>-</td>
<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>
<!--第14行-->
<td>3,7,3,9,6</td>
<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>
<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>
<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>
<td>-</td><td>组六</td><td>-</td>
<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>
<!--第15行-->
<td>2,2,5,4,6</td>
<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>
<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>
<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>
<td>-</td><td>组六</td><td>-</td>
<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>
<!--第16行-->
<td>5,1,2,2,4</td>
<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>
<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>
<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>
<td>组三</td><td>-</td><td>-</td>
<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>
<!--第17行-->
<td>3,1,8,4,6</td>
<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>
<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>
<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>
<td>-</td><td>组六</td><td>-</td>
<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>
<!--第18行-->
<td>6,4,2,3,6</td>
<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>
<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>
<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>
<td>-</td><td>组六</td><td>-</td>
<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>
<!--第19行-->
<td>6,8,5,7,4</td>
<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>
<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>
<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>
<td>-</td><td>组六</td><td>-</td>
<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>
<!--第20行-->
<td>6,1,1,1,9</td>
<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>
<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>
<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>
<td>组三</td><td>-</td><td>-</td>
<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 id="divPiao" style="background: gray; -webkit-opacity:0.5; width:80px; height:300px; left:0px; top:0px;"></div><!-- position: fixed relative -->
<div style="background-color:blue; height:20px;"></div>
<!--
<div id="divPiao" style="border:1px solid red; width:80px; height:30px; position: absolute; left:80px; top:50px;">
</div>
-->
</div>
</body>
</html>
2、
3、
时间： 2024-10-21 15:34:36