如何粘贴div表头?

时间:2015-07-28 04:38:35

标签: html css

我正在创建包含div代码的表格,而不是使用table。这是JsFiddle链接。现在我遇到了一个问题,我不能粘贴第一行表(我定义为tableHeader)。有人能指出我如何贴上桌子的标题吗?

我用过......

<div class="gridHeader" style="position: fixed; z-index: 1000; top: 0px; width: auto;">

但这不在桌面之内。以下是我的 HTML

<div id="grid">
            <div class="gridHeader">
                <div class="gridHeader gridCell"><label>#</label></div>
                    <div class="gridCell"><label>01</label></div>
                    <div class="gridCell"><label>02</label></div>
                    <div class="gridCell"><label>03</label></div>
                    <div class="gridCell"><label>04</label></div>
                    <div class="gridCell"><label>05</label></div>
                    <div class="gridCell"><label>06</label></div>
                    <div class="gridCell"><label>07</label></div>
                    <div class="gridCell"><label>08</label></div>
                    <div class="gridCell"><label>09</label></div>
                    <div class="gridCell"><label>10</label></div>
                    <div class="gridCell"><label>11</label></div>
                    <div class="gridCell"><label>12</label></div>
                    <div class="gridCell"><label>13</label></div>
                    <div class="gridCell"><label>14</label></div>
                    <div class="gridCell"><label>15</label></div>
            </div>
                <div class="gridRow">
                    <div class="gridHeader gridCell"><label>Room #01</label></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                </div>
                <div class="gridRow">
                    <div class="gridHeader gridCell"><label>Room #02</label></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                </div>
                <div class="gridRow">
                    <div class="gridHeader gridCell"><label>Room #03</label></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                        <div class="gridCell item"></div>
                </div>
        </div>

CSS 为....

        #grid {
        display : inline-block;
        color: white;
        /* box-shadow: 0 1px 0 #fff inset; */
        border-collapse: collapse;
        font-size: 90%;
        overflow-y: auto;
        height: 130px;
    }
    .gridHeader {
        display:table-header-group;
        width: 100px;
        font-weight:bold;
        text-align: center;
        /* text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); */
        background: #618aa0; /* Old browsers */
        background: -moz-linear-gradient(top, #618aa0 0%, #091544 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#618aa0), color-stop(100%,#091544)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #618aa0 0%,#091544 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #618aa0 0%,#091544 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #618aa0 0%,#091544 100%); /* IE10+ */
        background: linear-gradient(to bottom, #618aa0 0%,#091544 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#618aa0', endColorstr='#091544',GradientType=0 ); 
    }

    .gridRow {
        display:table-row;
    }
    .gridCell {
        display:table-cell;
        border : 1px solid black;
        overflow: hidden;
        padding: 4px 10px;
    }

    .item {
        cursor: crosshair;
    }

    .selected {
        background-color: #3E6640;
        border: 0 solid #3E6640;
    }

0 个答案:

没有答案