我正在创建包含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;
}