文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 ><th>中<p>中的水平居中竖排文本

问<th>中<p>中的水平居中竖排文本
EN

Stack Overflow用户
提问于 2019-07-10 21:10:36
回答 2查看 71关注 0票数 0

我有一个表格标题，上面有一些竖排文本，如下所示

代码语言：javascript
复制
H   G   K
E   O   N
L   O   O
L   D   W
O       N

唯一的问题是字母没有在表<th>的中心对齐。

我试着把text-align:center;放进去，但它不起作用。我还尝试将margin-left: 1em;放入<th>中，我使用<p>作为文本，因为我的一个朋友告诉我这样做，但不知道这是不是正确的方法。

​

代码语言：javascript
复制
/* TABLE */

table {
  /* Remove spacing between table cells */
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #cbcbcb;
  text-align: center;
  width: 100%
}

table caption {
  color: #000;
  padding: 1em 0;
  text-align: left;
}

table td,
table th {
  border-left: 1px solid #cbcbcb;
  /*  inner column border */
  border-width: 0 0 0 1px;
  margin: 0;
  overflow: visible;
  /*to make ths where the title is really long work*/
  padding: 0.5em;
  /* cell padding */
}

table thead {
  background-color: #2980BA;
  /* colore blu  #e0e0e0; colore grigio */
  color: white;
  /* colore bianco  #e0e0e0; colore nero */
  vertical-align: bottom;
}

tfoot {
  background: #2980BA;
  /* colore blu */
  color: white;
  font-size: 80%;
}

tfoot td {
  border-bottom: 0;
  border-right: 0;
}


/* TABLE BORDERS*/

table td {
  border-bottom: 1px solid #cbcbcb;
}

table tbody>tr:last-child>td {
  border-bottom-width: 0;
}


/* VERTICAL TEXT */

.vertical-text {
  vertical-align: top !important;
  padding: 0 !important;
  word-wrap: break-word;
  white-space: normal !important;
}

.vertical-text p {
  width: 1px;
  color: red;
}


/* OTHER ELEMENTS */

* {
  font-family: Verdana;
}

body {
  background: white;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

h2,
h3,
h4,
h5 {
  color: white;
  background: #2980BA;
  /* colore blu */
  text-align: center;
  width: auto;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}

body>p {
  text-align: center;
}
代码语言：javascript
复制
<table>
  <caption>FT: ZT0000 - ZT0000</caption>
  <thead>
    <tr>
      <th>Add/Change</th>
      <th>Plan_Release</th>
      <th>PN Name</th>
      <th>PN Description</th>
      <th class="vertical-text">

        <p>BR|CIH</p>

      </th>
      <th class="vertical-text">

        <p>BR|NHAG</p>

      </th>
      <th class="vertical-text">

        <p>DF|BC</p>

      </th>
      <th class="vertical-text">

        <p>DF|N</p>

      </th>
      <th class="vertical-text">

        <p>DF|VC</p>

      </th>
      <th class="vertical-text">

        <p>EP|175HP</p>

      </th>
      <th class="vertical-text">

        <p>EP|185HP</p>

      </th>
      <th class="vertical-text">

        <p>EP|190HP</p>

      </th>
      <th class="vertical-text">

        <p>EP|200HP</p>

      </th>
      <th class="vertical-text">

        <p>EP|220HP</p>

      </th>
      <th class="vertical-text">

        <p>MD|MR2017</p>

      </th>
      <th class="vertical-text">

        <p>VE|PSGARU</p>

      </th>
      <th class="vertical-text">

        <p>VE|PSMTA</p>

      </th>
      <th class="vertical-text">

        <p>T0000|395000</p>

      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Remove</td>
      <td>Release</td>
      <td>395000905</td>
      <td>-1 COMMON COMPONENTS</td>
      <td/>
      <td>X</td>
      <td/>
      <td>X</td>
      <td/>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td/>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
      <td>Remove</td>
      <td>Release</td>
      <td>395000906</td>
      <td>-1 COMMON COMPONENTS</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td/>
      <td>X</td>
      <td/>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td/>
      <td>X</td>
    </tr>
  </tbody>
</table>

​

html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-07-10 21:46:24

在.vertical-text p中，尝试添加margin:auto并增加width:12px。

它应该居中对齐

​

代码语言：javascript
复制
table {
  /* Remove spacing between table cells */
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #cbcbcb;
  text-align: center;
  width: 100%
}

table caption {
  color: #000;
  padding: 1em 0;
  text-align: left;
}

table td,
table th {
  border-left: 1px solid #cbcbcb;
  /*  inner column border */
  border-width: 0 0 0 1px;
  margin: 0;
  overflow: visible;
  /*to make ths where the title is really long work*/
  padding: 0.5em;
  /* cell padding */
}

table thead {
  background-color: #2980BA;
  /* colore blu  #e0e0e0; colore grigio */
  color: white;
  /* colore bianco  #e0e0e0; colore nero */
  vertical-align: bottom;
}

tfoot {
  background: #2980BA;
  /* colore blu */
  color: white;
  font-size: 80%;
}

tfoot td {
  border-bottom: 0;
  border-right: 0;
}


/* TABLE BORDERS*/

table td {
  border-bottom: 1px solid #cbcbcb;
}

table tbody>tr:last-child>td {
  border-bottom-width: 0;
}


/* VERTICAL TEXT */

.vertical-text {
  vertical-align: top !important;
  padding: 0 !important;
  word-wrap: break-word;
  white-space: normal !important;
}

.vertical-text p {
  width: 12px;
  color: red;
  margin: auto;
}


/* OTHER ELEMENTS */

* {
  font-family: Verdana;
}

body {
  background: white;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

h2,
h3,
h4,
h5 {
  color: white;
  background: #2980BA;
  /* colore blu */
  text-align: center;
  width: auto;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}

body>p {
  text-align: center;
}
代码语言：javascript
复制
<table>
  <caption>FT: ZT0000 - ZT0000</caption>
  <thead>
    <tr>
      <th>Add/Change</th>
      <th>Plan_Release</th>
      <th>PN Name</th>
      <th>PN Description</th>
      <th class="vertical-text">

        <p>BR|CIH</p>

      </th>
      <th class="vertical-text">

        <p>BR|NHAG</p>

      </th>
      <th class="vertical-text">

        <p>DF|BC</p>

      </th>
      <th class="vertical-text">

        <p>DF|N</p>

      </th>
      <th class="vertical-text">

        <p>DF|VC</p>

      </th>
      <th class="vertical-text">

        <p>EP|175HP</p>

      </th>
      <th class="vertical-text">

        <p>EP|185HP</p>

      </th>
      <th class="vertical-text">

        <p>EP|190HP</p>

      </th>
      <th class="vertical-text">

        <p>EP|200HP</p>

      </th>
      <th class="vertical-text">

        <p>EP|220HP</p>

      </th>
      <th class="vertical-text">

        <p>MD|MR2017</p>

      </th>
      <th class="vertical-text">

        <p>VE|PSGARU</p>

      </th>
      <th class="vertical-text">

        <p>VE|PSMTA</p>

      </th>
      <th class="vertical-text">

        <p>T0000|395000</p>

      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Remove</td>
      <td>Release</td>
      <td>395000905</td>
      <td>-1 COMMON COMPONENTS</td>
      <td/>
      <td>X</td>
      <td/>
      <td>X</td>
      <td/>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td/>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
      <td>Remove</td>
      <td>Release</td>
      <td>395000906</td>
      <td>-1 COMMON COMPONENTS</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td/>
      <td>X</td>
      <td/>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td/>
      <td>X</td>
    </tr>
  </tbody>
</table>

​

票数 0
EN

Stack Overflow用户

发布于 2019-07-10 21:33:07

我真的不明白你想要做什么，但这就是我设法做到的：

​

代码语言：javascript
复制
/* TABLE */

table {
    /* Remove spacing between table cells */
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
    text-align: center;
    width: 100%
}

table caption {
    color: #000;
    padding: 1em 0;
    text-align: left;
}

table td,
table th {
    border-left: 1px solid #cbcbcb;
    /*  inner column border */
    border-width: 0 0 0 1px;
    margin: 0;
    overflow: visible;
    /*to make ths where the title is really long work*/
    padding: 0.5em;
    /* cell padding */

}

table thead {
    background-color: #2980BA;
    /* colore blu  #e0e0e0; colore grigio */
    color: white;
    /* colore bianco  #e0e0e0; colore nero */
    vertical-align: bottom;
}

tfoot {
    background: #2980BA;
    /* colore blu */
    color: white;
    font-size: 80%;
}

tfoot td {
    border-bottom: 0;
    border-right: 0;
}



/* TABLE BORDERS*/

table td { border-bottom: 1px solid #cbcbcb; }

table tbody > tr:last-child > td { border-bottom-width: 0; }






/* VERTICAL TEXT */

.vertical-text {
        vertical-align: top !important;
        word-break:break-all;
  }

.vertical-text p {
    width: 1px;
    color:red;

}










/* OTHER ELEMENTS */

* { font-family: Verdana; }

body {
    background: white;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 50px;
    margin-right: 50px;
}
h2,
h3,
h4,
h5 {
    color: white;
    background: #2980BA;
    /* colore blu */
    text-align: center;
    width: auto;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

body > p { text-align: center; }
代码语言：javascript
复制
<table>
    <caption>FT: ZT0000 - ZT0000</caption>
    <thead>
    <tr style="vertical-align:middle">
        <th>Add/Change</th>
        <th>Plan_Release</th>
        <th>PN Name</th>
        <th>PN Description</th>
        <th class="vertical-text">

           <p>BR|CIH</p>

        </th>
        <th class="vertical-text">

            <p>BR|NHAG</p>

        </th>
        <th class="vertical-text">

            <p>DF|BC</p>

        </th>
        <th class="vertical-text">

            <p>DF|N</p>

        </th>
        <th class="vertical-text">

            <p>DF|VC</p>

        </th>
        <th class="vertical-text">

            <p>EP|175HP</p>

        </th>
        <th class="vertical-text">

            <p>EP|185HP</p>

        </th>
        <th class="vertical-text">

            <p>EP|190HP</p>

        </th>
        <th class="vertical-text">

            <p>EP|200HP</p>

        </th>
        <th class="vertical-text">

            <p>EP|220HP</p>

        </th>
        <th class="vertical-text">

            <p>MD|MR2017</p>

        </th>
        <th class="vertical-text">

            <p>VE|PSGARU</p>

        </th>
        <th class="vertical-text">

            <p>VE|PSMTA</p>

        </th>
        <th class="vertical-text">

            <p>T0000|395000</p>

        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Remove</td>
        <td>Release</td>
        <td>395000905</td>
        <td>-1 COMMON COMPONENTS</td>
        <td/>
        <td>X</td>
        <td/>
        <td>X</td>
        <td/>
        <td>X</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
        <td/>
        <td>X</td>
        <td>X</td>
    </tr>
    <tr>
        <td>Remove</td>
        <td>Release</td>
        <td>395000906</td>
        <td>-1 COMMON COMPONENTS</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
        <td/>
        <td>X</td>
        <td/>
        <td>X</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
        <td/>
        <td>X</td>
    </tr>
    </tbody>
</table>

​

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

https://stackoverflow.com/questions/56971461

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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