使文本在高网格单元格中显示为垂直

Question

这是我的代码jsFiddle。我的目标是制作阅读“垂直文字”的文字。垂直显示，如下图所示：

这是我目前的表结构：

<table class="tg" style="table-layout: auto;">
    <colgroup>
        <col>
        <col>
        <col>
    </colgroup>
    <tr>
        <td class="tg-n57y" colspan="3">Primary Header</td>
    </tr>
    <tr>
        <td class="tg-sm4f" colspan="3">Sub-Header</td>
    </tr>
    <tr>
        <td class="tg-bk9r" rowspan="8">Vertical Text</td>
        <td class="tg-bk9r" colspan="2">Another Title</td>
    </tr>
    <tr>
        <td class="tg-yw4l" rowspan="7">Vertical Text</td>
        <td class="tg-huo5">Title 1</td>
    </tr>
    <tr>
        <td class="tg-z10y">Title 2</td>
    </tr>
    <tr>
        <td class="tg-h2ec">Title 3</td>
    </tr>
    <tr>
        <td class="tg-h2ec" rowspan="3">Title 4</td>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
        <td class="tg-h2ec">Title 5</td>
    </tr>
</table>

Answer 1

您必须将应该显示为垂直的文本换行。在此示例中，我使用<div>包装了文本，并将类.rotate添加到<td>。应添加以下CSS：

td.rotate {
    vertical-align:middle!important;
}
td.rotate div {
    transform: rotate(270deg);
}

您可以使用以下解决方案（https://jsfiddle.net/4q1suvrp/17/）：

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}
.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}
.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}
.tg .tg-941l {
  background-color: #ffc000;
  text-align: center;
  vertical-align: top;
}
.tg .tg-8uz4 {
  background-color: #c6efce;
  text-align: center;
  vertical-align: top;
}
.tg .tg-baqh {
  text-align: center;
  vertical-align: top;
}
.tg .tg-vjy7 {
  background-color: #ffeb9c;
  text-align: center;
  vertical-align: top;
}
.tg .tg-h2ec {
  background-color: #f2f2f2;
  vertical-align: top;
}
.tg .tg-z10y {
  background-color: #ffc7ce;
  vertical-align: top;
}
.tg .tg-65jx {
  background-color: #b7dee8;
  text-align: center;
  vertical-align: top;
}
.tg .tg-bk9r {
  background-color: #b7dee8;
  vertical-align: top;
}
.tg .tg-lqy6 {
  text-align: right;
  vertical-align: top;
}
.tg .tg-w7ao {
  background-color: #ffc7ce;
  text-align: center;
  vertical-align: top;
}
.tg .tg-yw4l {
  vertical-align: top;
}
.tg .tg-n57y {
  background-color: #c6efce;
  vertical-align: top;
}
.tg .tg-sm4f {
  background-color: #ffeb9c;
  vertical-align: top;
}
.tg .tg-huo5 {
  background-color: #ffc000;
  vertical-align: top;
}
.tg .tg-9x5q {
  background-color: #f2f2f2;
  text-align: center;
  vertical-align: top;
}
@media screen and (max-width: 767px) {
  .tg {
    width: auto !important;
  }
  .tg col {
    width: auto !important;
  }
  .tg-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.FixedWidthContainer {
  width: 100%;
  margin: 100px auto;
  border: 2px solid #000;
  overflow: auto;
  white-space: nowrap;
  box-shadow: 0 0 10px #000;
}
td.rotate {
  vertical-align:middle!important;
}
td.rotate div {
  transform: rotate(270deg);
}

<table class="tg" style="table-layout: auto;">
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <tr>
    <td class="tg-n57y" colspan="3">Primary Header</td>
  </tr>
  <tr>
    <td class="tg-sm4f" colspan="3">Sub-Header</td>
  </tr>
  <tr>
    <td class="tg-bk9r rotate" rowspan="8"><div>Vertical Text</div></td>
    <td class="tg-bk9r" colspan="2">Another Title</td>
  </tr>
  <tr>
    <td class="tg-yw4l rotate" rowspan="7">
      <div> Vertical Text</div>
    </td>
    <td class="tg-huo5">Title 1</td>
  </tr>
  <tr>
    <td class="tg-z10y">Title 2</td>
  </tr>
  <tr>
    <td class="tg-h2ec">Title 3</td>
  </tr>
  <tr>
    <td class="tg-h2ec" rowspan="3">Title 4</td>
  </tr>
  <tr></tr>
  <tr></tr>
  <tr>
    <td class="tg-h2ec">Title 5</td>
  </tr>
</table>

Answer 2

请试试这个;

HTML：

<td class="tg-bk9r" rowspan="8"><span class="vertical-text">Vertical Text</span></td>

CSS：

span.vertical-text {
    float: left;
    margin-left: 40px;
    padding: 10px;
    text-transform: uppercase;
    transform: rotate(90deg);
    transform-origin: left top 0;
}