CSS3 自定义Table

最新推荐文章于 2024-07-30 10:39:47 发布

福州司马懿

最新推荐文章于 2024-07-30 10:39:47 发布

阅读量1.9k

点赞数 1

分类专栏： # CSS3 自定义控件文章标签： css3 table

转载请注明出处——https://blog.csdn.net/chy555chy

本文链接：https://blog.csdn.net/chy555chy/article/details/54947354

版权

CSS3 自定义控件专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf8">
        <style>
            body {
                font-family: 'trebuchet MS', 'Lucida sans', Arial;
                font-size: 18px;
            }
            #styleControl {
                position: fixed;
                right: 0;
                margin-right: 10px;
                padding: 10px;
                border: 1px solid gray;
                border-radius: 5px;
                box-shadow: 1px 1px 5px gray;
                background: white;
                opacity: 0.9;
            }
            input[name="style"] {
                vertical-align: middle;
            }
            #styleControl h3 {
                text-align: center;
                margin: 5px;
            }
            caption {
                font-weight: bold;
                margin-bottom: 10px
            }
            table {
                width: 60%;
                border-spacing: 0px;
                border-radius: 5px;
                margin: 20px auto;

            }
            th, td {
                padding: 10px;
                text-align: center;
            }
            tfoot td {
                text-align: left;
            }
            /*--------------------------------*/
            .bordered {
                border: 1px solid #ccc;
                box-shadow: 2px 2px 1px #ccc;
            }
            .bordered thead {
                /* 渐变的只能赋予图像，如果赋予background-color将无效 */
                background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
            }
            .bordered tbody tr:hover {
                background: #fdf8e9;
            }
            .bordered th {
                border-right: 1px solid #ccc;
            } 
            .bordered td {
                border-right: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
            }
            /* thead 的最后一个th; tbody,tfoot 的最后一个td */
            .bordered th:last-child, .bordered td:last-child {
                border-right: none;
            }
            /* tbody,tfoot 的最后一个tr的所有td */
            .bordered tr:last-child td {
                border-bottom: none;
            }
            /* tbody 的第一个tr的所有td; tfoot 的第一个tr的所有td */
            .bordered tbody tr:first-child td, .bordered tfoot tr:first-child td {
                border-top: 1px solid #ccc;
            }
            /*--------------------------------*/
            .zebra {
                border: 1px solid #ccc;
            }
            /* 注意: border 设置在thread,tbody,tfoot或者是tr都是不会生效的. 只有设置在table或th或td才会生效 */
            .zebra thead th {
                background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);
            }
            /* 第偶数个子元素 */
            .zebra tbody tr:nth-child(even) {
                background-color: #f5f5f5;
            }
            .zebra tfoot td {
                border-top: 1px solid #ccc;
                background-color: #eee;
            }
        </style>
    </head>
    <body>
        <div id="styleControl">
            <h3>Style</h3>
            <hr>
            <input type="radio" name="style" onChange="onStyleChange()">none
            <br>
            <input type="radio" name="style" value="bordered" onChange="onStyleChange()">bordered
            <br>
            <input type="radio" name="style" value="zebra" onChange="onStyleChange()">zebra
        </div>
        <script>
            var title = "TIOBE Index for January 2017";
            var foot = "January Headline: Google's Go is TIOBE's programming language of 2016";
            var ths = ["Jan 2017", "Programming Language", "Ratings"];
            var languages = ["Java", "C", "C++", "C#", "Python", "Visual Basic .NET", "JavaScript", "Perl", "Assembly language", "PHP"];
            var ratings = ["17.278%", "9.349%", "6.301%", "4.039%", "3.465%", "2.960%", "2.850%", "2.750%", "2.701%", "2.564%"];
            var columns = [languages, ratings]; 

            function createNoItemTable() {
                var table = document.createElement("table");
                var caption = document.createElement("caption");
                caption.innerHTML = title;
                table.appendChild(caption);
                var thead = document.createElement("thead");
                var row = thead.insertRow();
                for(var i=0; i<ths.length; i++) {
                    var th = document.createElement("th");
                    row.appendChild(th);
                    th.textContent = ths[i];
                }
                table.appendChild(thead);
                document.body.appendChild(table);
            }

            function createOneItemTable() {
                var table = document.createElement("table");
                var caption = document.createElement("caption");
                caption.innerHTML = title;
                table.appendChild(caption);
                var thead = document.createElement("thead");
                var row = thead.insertRow();
                for(var i=0; i<ths.length; i++) {
                    var th = document.createElement("th");
                    row.appendChild(th);
                    th.textContent = ths[i];
                }
                row = table.insertRow();
                var cell = row.insertCell();
                cell.innerHTML = 1;
                for(var i=0; i<columns.length; i++) {
                    cell = row.insertCell();
                    cell.textContent = columns[i][0];
                }
                table.appendChild(thead);
                document.body.appendChild(table);
            }

            function createTable() {
                var table = document.createElement("table");
                var caption = document.createElement("caption");
                caption.innerHTML = title;
                table.appendChild(caption);
                var thead = document.createElement("thead");
                var tfoot = document.createElement("tfoot");
                var tbody = document.createElement("tbody");
                //thead
                var row = thead.insertRow();
                //row.setAttribute("align", "center");
                for(var i=0; i<ths.length; i++) {
                    var th = document.createElement("th");
                    row.appendChild(th);
                    th.textContent = ths[i];
                }
                //tfoot
                row = tfoot.insertRow();
                var cell = row.insertCell();
                cell.innerHTML = foot;
                cell.setAttribute("colspan", ths.length);
                //tbody
                for(var i=0; i<languages.length; i++) {
                    row = tbody.insertRow();
                    //row.setAttribute("align", "center");
                    cell = row.insertCell();
                    cell.innerHTML = i+1;
                    for(var j=0; j<columns.length; j++) {
                        cell = row.insertCell();
                        cell.textContent = columns[j][i];
                    }
                }
                table.appendChild(thead);
                table.appendChild(tfoot);
                table.appendChild(tbody);
                document.body.appendChild(table);
            }

            function onStyleChange() {
                var tables = document.getElementsByTagName("table");
                if(!tables || tables.length === 0) {
                    return;
                }
                var value = event.target.value;
                if(value) {
                    for(var i=0; i<tables.length; i++) {
                        tables[i].setAttribute("class", value);
                    }
                } else {
                    for(var i=0; i<tables.length; i++) {
                        tables[i].removeAttribute("class");
                    }
                }
            }

            createNoItemTable();
            createOneItemTable();
            createTable();
        </script>
    </body>
</html>