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