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

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>