文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使表格单元格垂直和拉伸/收缩以适应内容？

问如何使表格单元格垂直和拉伸/收缩以适应内容？
EN

Stack Overflow用户
提问于 2018-08-01 01:27:22
回答 1查看 1K关注 0票数 3

为了节省屏幕空间，我尝试将我的表格标题单元格(th)转换为一条垂直的文本行。

为了实现这一点，我在头单元格中添加了.vertical-text {transform: rotate(-90deg); white-space: nowrap;}，但是它有一些奇怪的效果。

问题：

( 1)文本不直接放在其列的顶部。它位于旁边，很难分辨哪个标题属于哪一列。

2)页眉单元格的高度不与转换文本的垂直高度相适应，而是被截断。我需要标题行伸展以适应新的文本高度。

( 3)列的宽度在使文本垂直后不会收缩，它们保持相同的宽度，就好像文本不是垂直的一样。使标题单元格垂直的全部目的是节省空间，但当我这样做时，它不会调整列宽的大小。

​

代码语言：javascript
复制
.container {
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.vertical-text {
  transform: rotate(-90deg);
  white-space: nowrap;
}

table {
  border-collapse: collapse;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  min-width: 100%;
  position: relative;
  margin: 0 -20px;
}

table * {
  position: relative;
}

table td,
table th {
  padding-left: 8px;
}

table thead tr {
  background: #36304a;
}

table tbody tr {
  height: 50px;
}

table tbody tr:last-child {
  border: 0;
}

table td,
table th {
  text-align: left;
}

table td.l,
table th.l {
  text-align: right;
}

table td.c,
table th.c {
  text-align: center;
}

table td.r,
table th.r {
  text-align: center;
}

.header th {
  font-size: 18px;
  color: #fff;
  line-height: 1.2;
  font-weight: unset;
}

tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

tbody tr {
  font-size: 15px;
  color: #808080;
  line-height: 1.2;
  font-weight: unset;
}

tbody tr:hover {
  color: #555555;
  background-color: #f5f5f5;
  cursor: pointer;
}

.column {
  width: 160px;
}

.column:first-child {
  padding-left: 40px;
}

.column:last-child {
  padding-right: 40px;
}
代码语言：javascript
复制
<div class="container">
  <table>
    <thead>
      <tr class="header">
        <th class="column vertical-text"></th>
        <th class="column vertical-text">Remove Apps</th>
        <th class="column vertical-text">Restrict App Access</th>
        <th class="column vertical-text">Block Tracking</th>
        <th class="column vertical-text">Disable Ads</th>
        <th class="column vertical-text">Disable Scheduler</th>
        <th class="column vertical-text">Backup</th>
        <th class="column vertical-text">Restore</th>
        <th class="column vertical-text">Misc</th>
        <th class="column vertical-text">Last Updated</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="column">Some Name Here</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
      </tr>
      <tr>
        <td class="column">Some Name Here</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
      </tr>
      <tr>
        <td class="column">Some Name Here</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
      </tr>


    </tbody>
  </table>
</div>

​

html-table
html
css
EN

回答 1

Stack Overflow用户

发布于 2018-08-01 07:09:39

代码语言：javascript
复制
Just Add
th.vertical-text p{
    writing-mode: vertical-rl;
    text-orientation: upright;
}

​

代码语言：javascript
复制
.container {
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.vertical-text {
     
}
th.vertical-text p{
writing-mode: vertical-rl;
text-orientation: upright;
}

table {
  border-collapse: collapse;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  min-width: 100%;
  position: relative;
  margin: 0 -20px;
}

table * {
  position: relative;
}

table td,
table th {
  padding-left: 8px;
}

table thead tr {
  background: #36304a;
}

table tbody tr {
  height: 50px;
}

table tbody tr:last-child {
  border: 0;
}

table td,
table th {
  text-align: left;
}

table td.l,
table th.l {
  text-align: right;
}

table td.c,
table th.c {
  text-align: center;
}

table td.r,
table th.r {
  text-align: center;
}

.header th {
  font-size: 18px;
  color: #fff;
  line-height: 1.2;
  font-weight: unset;
}

tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

tbody tr {
  font-size: 15px;
  color: #808080;
  line-height: 1.2;
  font-weight: unset;
}

tbody tr:hover {
  color: #555555;
  background-color: #f5f5f5;
  cursor: pointer;
}

.column {
  width: 160px;
}

.column:first-child {
  padding-left: 40px;
}

.column:last-child {
  padding-right: 40px;
}
代码语言：javascript
复制
<div class="container">
  <table>
    <thead>
      <tr class="header">
        <th class="column vertical-text"><p></p></th>
        <th class="column vertical-text"><p>Remove Apps</p></th>
        <th class="column vertical-text"><p>Restrict App Access</p></th>
        <th class="column vertical-text"><p>Block Tracking</p></th>
        <th class="column vertical-text"><p>Disable Ads</p></th>
        <th class="column vertical-text"><p>Disable Scheduler</p></th>
        <th class="column vertical-text"><p>Backup</p></th>
        <th class="column vertical-text"><p>Restore</p></th>
        <th class="column vertical-text"><p>Misc</p></th>
        <th class="column vertical-text"><p>Last Updated</p></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="column">Some Name Here</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
      </tr>
      <tr>
        <td class="column">Some Name Here</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
      </tr>
      <tr>
        <td class="column">Some Name Here</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">Yes</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">No</td>
        <td class="column" data-title="Points">Yes</td>
      </tr>


    </tbody>
  </table>
</div>

​

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

https://stackoverflow.com/questions/51624142

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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