table01

Posted 2020-08-07 Html5Skill
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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</jQuery应用 代码片段
 js table td读取片段
 19 01 11  javascript    ?????????????????????(???????????????)   ??????????????????????????????(代码片段
 [linux][c/c++]代码片段01
 AJAX相关JS代码片段和部分浏览器模型
 这两个代码片段有啥区别？