有一张表,上面有几列。第一列是hours
,其余的都是空的。
hour
列每隔一行就有一个label
。每一行都应该有完全相同的height
,标签应该是“行之间”--最终结果应该如下所示:
我的代码是:
.headerClass {
border: none;
}
.indexColumn {
width: 30px;
height: 10px;
}
.dataColumn {
border-top: 2px solid #F5F5F5;
border-left: 2px solid lightgrey;
border-right: 2px solid lightgrey;
width: 50px;
height: 10px;
}
.startHour {
border-top: 2px solid lightgrey;
border-left: 2px solid lightgrey;
border-right: 2px solid lightgrey;
}
table {
border: none;
border-collapse: collapse;
}
<table>
<thead>
<tr>
<th class="headerClass "></th>
<th class="headerClass">first</th>
<th class="headerClass">second</th>
<th class="headerClass">third</th>
</tr>
</thead>
<tbody>
<tr>
<td class="">1:00</td>
<td class="dataColumn startHour"></td>
<td class="dataColumn startHour"></td>
<td class="dataColumn startHour"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="">2:00</td>
<td class="dataColumn startHour"></td>
<td class="dataColumn startHour"></td>
<td class="dataColumn startHour"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="">3:00</td>
<td class="dataColumn startHour"></td>
<td class="dataColumn startHour"></td>
<td class="dataColumn startHour"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<td class="">4:00</td>
<td class="dataColumn startHour"></td>
<td class="dataColumn startHour"></td>
<td class="dataColumn startHour"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
</tbody>
</table>
结果是:
所以问题是labels
改变了它们所在行的高度,而不是“它们之间”。
怎么可能得到这样的效果呢?我尝试将indexColumn
的margin-top
更改为-15px
,但没有任何反应。
发布于 2019-03-01 04:30:18
您需要使用定位将小时向上移动50%,为此,您需要将它们包装在一个元素中,将其位置设置为绝对,并将父表单元格上的位置设置为相对:
.headerClass {
border: none;
}
.indexColumn {
width: 30px;
height: 10px;
}
.dataColumn {
border-top: 2px solid #F5F5F5;
border-left: 2px solid lightgrey;
border-right: 2px solid lightgrey;
width: 50px;
height: 10px;
}
.startHour {
border-top: 2px solid lightgrey;
border-left: 2px solid lightgrey;
border-right: 2px solid lightgrey;
}
table {
border: none;
border-collapse: collapse;
}
td {
position: relative;
}
span {
top: -50%;
position: absolute;
}
<table>
<thead>
<tr>
<th class="headerClass "></th>
<th class="headerClass">first</th>
<th class="headerClass">second</th>
<th class="headerClass">third</th>
</tr>
</thead>
<tbody>
<tr>
<td class=""><span>1:00</span></td>
<td class="dataColumn startHour"></td>
<td class="dataColumn startHour"></td>
<td class="dataColumn startHour"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class=""><span>2:00</span></td>
<td class="dataColumn startHour"></td>
<td class="dataColumn startHour"></td>
<td class="dataColumn startHour"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class=""><span>3:00</span></td>
<td class="dataColumn startHour"></td>
<td class="dataColumn startHour"></td>
<td class="dataColumn startHour"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<td class=""><span>4:00</span></td>
<td class="dataColumn startHour"></td>
<td class="dataColumn startHour"></td>
<td class="dataColumn startHour"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
<tr>
<td class="indexColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
<td class="dataColumn"></td>
</tr>
</tbody>
</table>
发布于 2019-03-01 04:29:00
使用rowspan="2"
on hour <td>
发布于 2019-03-01 04:30:30
您可以在td中设置文本的行高:
td {
line-height: 12px;
}
12px因为它是高度(10px)加上边框(2px)!
https://stackoverflow.com/questions/54933650
复制相似问题