Question

有一个包含几列的表。第一列为hireapp，其余均为空。

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的{{1}}更改为margin-top，但是什么也没发生。

Answer 1

您需要使用定位将小时数上移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>

Answer 2

每小时rowspan="2"使用<td>

Answer 3

您可以在td中设置文本的行高：

td {
  line-height: 12px;
}

12px，因为它是高度（10px）加上边框（2px）！

Answer 4

一种解决方案是使用绝对定位：

更改

 <td class="">4:00</td>

到

 <td style="position:relative"><span style="position:absolute; top:0">4:00</span></td>

Answer 5

也要上几个小时的课，并将字体大小设置为与高度相同。

<td class="hourColumn">1:00</td>


<style>
 .hourColumn{
        height: 10px;
        font-size: 8px;
    }
</style>

将文字放在tr线上

5 个答案: