文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >将文本放置在tr行上

问将文本放置在tr行上
EN

Stack Overflow用户
提问于 2019-03-01 04:22:05
回答 5查看 49关注 0票数 0

有一张表，上面有几列。第一列是hours，其余的都是空的。

hour列每隔一行就有一个label。每一行都应该有完全相同的height，标签应该是“行之间”--最终结果应该如下所示：

​

我的代码是：

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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，但没有任何反应。

html
css
EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2019-03-01 04:30:18

您需要使用定位将小时向上移动50%，为此，您需要将它们包装在一个元素中，将其位置设置为绝对，并将父表单元格上的位置设置为相对：

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2019-03-01 04:29:00

使用rowspan="2" on hour <td>

票数 0
EN

Stack Overflow用户

发布于 2019-03-01 04:30:30

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

代码语言：javascript
复制
td {
  line-height: 12px;
}

12px因为它是高度(10px)加上边框(2px)！

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/54933650

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档