<th>中<p>内的水平居中垂直文本

时间：2019-07-10 13:10:36

标签： html css

我有一个表头，上面有一些垂直文本

H   G   K
E   O   N
L   O   O
L   D   W
O       N

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

我尝试放text-align:center;，但不起作用。我也尝试过放margin-left: 1em; 我在<p>中使用了<th>作为文本，因为我的一个朋友告诉我这样做，但是不知道这是否是正确的方法。

/* 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;
}
<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>

2 个答案:

答案 0 :(得分：0)

我真的不明白您要做什么，但这是我设法做到的：ve​​r 

/* 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; }
<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>

答案 1 :(得分：0)

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

它应该在中心对齐

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;
}
<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>

相关问题
最新问题