如何减小倾斜列的宽度header？

Question

下面是输出 table：

我正在寻找可以减小 table header 宽度的解决方案，我已经尝试了几个解决方案，但其中 none 都有效。下面是我的代码：

<Style>
  /*additional CSS*/
  
  td,
  th {
    border: 1px solid black;
    font-family: Calibri (Body) !important;
  }
  
  table {
    border-collapse: collapse;
  }
  
  * {
    font-family: 'Calibri (Body) !important';
    line-height: 0.5 em;
  }
  
  .header {
    text-align: center;
    white-space: nowrap;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
  }
  
  .header:before {
    content: '';
    padding-top: 110%;
    /* takes width as reference, + 10% for faking some extra padding */
    display: inline-block;
    vertical-align: middle;
  }
  
  .header:after {
    background-color: #005CB9;
    color: white;
  }
</Style>
<table border="1">
  <thead>
    <tr style=" background-color: #005CB9;color: white;">
      <td style='text-align: center;'>

        <strong>Activity</strong>

      </td>
      <td class='header'>

        <strong>Screening</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345-1</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 1</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 2</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 3</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 4</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 5</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 6</strong>
        </p class='headerText'>
      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 7</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 8</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 9</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 10</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 11</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 12</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 13</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 14</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 15</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 16</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 17</strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 23 (Follow-Up Visit)
                        </strong>

      </td>
      <td class='header'>

        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 Premature Discontinuation</strong>

      </td>
    </tr>
  </thead>
</table>

Answer 1

您可以尝试在现代浏览器中使用 writing mode for this (its supported well，而不是对竖排文本使用 transform：

writing-mode: vertical-rl;
transform: rotate(-180deg);

最后调整您的 line-height - 请参阅下面的演示：

td,
th {
  border: 1px solid black;
  font-family: Calibri (Body) !important;
}

table {
  border-collapse: collapse;
}

* {
  font-family: 'Calibri (Body) !important';
  line-height: 1.5 /* adjusted */
}

.header {
  text-align: center;
  white-space: nowrap;
  /*transform-origin: 50% 50%;
  transform: rotate(-90deg);*/
}
.header strong { /* added */
   writing-mode: vertical-rl;
   transform: rotate(-180deg);
}

.header:before {
  content: '';
  padding-top: 110%;
  display: inline-block;
  vertical-align: middle;
}

.header:after {
  background-color: #005CB9;
  color: white;
}

<table border="1">
  <thead>
    <tr style=" background-color: #005CB9;color: white;">
      <td style='text-align: center;'>
        <strong>Activity</strong>
      </td>
      <td class='header'>
        <strong>Screening</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345-1</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 1</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 2</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 3</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 4</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 5</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 6</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 7</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 8</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 9</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 10</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 11</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 12</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 13</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 14</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 15</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 16</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 17</strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 23 (Follow-Up Visit)
                        </strong>
      </td>
      <td class='header'>
        <strong>ABCDEFGHJIJKLMNOPQRSTUVWXYZ12345 Premature Discontinuation</strong>
      </td>
    </tr>
  </thead>
</table>

如何减小倾斜列的宽度header？

How to reduce the width of tilt column header?

html

css

css-transforms

vertical-text