表格中文字的90度旋转

Question

表格中文字的90度旋转

6

我正在尝试使用旋转变换功能将表格顶部行中的文本垂直显示。虽然我成功地旋转了表头中的单词，但我无法缩短表列的宽度以与旋转标题的宽度相同（如果它按水平方式布局，则保持标题的相同宽度）。此外，我正在使用百分比来指示列宽度。

.vertical-th {
  transform: rotate(-90deg);
}

<table>
  <tr>
    <th colspan="3" class="text-center risk-th" style="width: 20%">Controls</th>
    <th class="risk-th" style="width: 4%">
      <!--Manuality-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Probability-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Gravity-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Mitigation-->
    </th>

    <th colspan="3"></th>
    <th class="vertical-th">Manuality</th>
    <th class="vertical-th">Probability</th>
    <th class="vertical-th">Gravity</th>
    <th class="vertical-th">Mitigation</th>

  </tr>
</table>

- Marchese Il Chihuahua

你能否创建一个工作的jsFiddle演示，可能附带所需结果的截图？对我来说不太清楚：https://jsfiddle.net/Lxw0x2db/ - Aziz

抱歉，我对此还不熟悉。我只是希望单词“Manuality”、“Probability”、“Gravity”和“Mitigation”能够并排旋转90度，从页面底部到顶部阅读。（例如，“Manuality”中的M将与“Probability”中的P相邻，依此类推。） - Marchese Il Chihuahua

你能解释一下为什么需要表格吗？是否可以更改HTML结构？ - Aziz

在每个标题下面，将会有来自 SQL 查询的数据。据我所知，为了确保界面对多种屏幕尺寸响应良好，最好的方法是使用表格，否则列标题会错位。（附言：正如您所见，我对这种编程类型还很新手） - Marchese Il Chihuahua

好的。您能否创建示例数据并截取屏幕截图以展示其外观？ - Aziz

@MarcheseIlChihuahua 如果我的回答对您有帮助，请进行审核，如果不行，我们可以寻找其他解决方案，谢谢。 - Shady Alset

3个回答

4

我们可以通过将标题文本包装在 DIV 中，并在其中的 th 和 DIV 上应用一些规则来实现一些CSS技巧，然后即使文本很长，我们也可以获得更多的样式能力，我们可以缩短标题的宽度。 类似这样的东西：希望这对你有所帮助，谢谢

th, td, table{
  border:solid 1px;
}

div.vertical{
  position: absolute;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg); /* Safari/Chrome */
  -moz-transform: rotate(-90deg);    /* Firefox */
  -o-transform: rotate(-90deg);      /* Opera */
  -ms-transform: rotate(-90deg);     /* IE 9 */
}

th.vertical{
  max-width: 50px;
  height: 85px;
  line-height: 14px;
  padding-bottom: 20px;
  text-align: inherit;
}

<table>
  <tr>
    <th colspan="3" class="text-center risk-th" style="width: 20%">Controls</th>
    <th class="risk-th" style="width: 4%">
      <!--Manuality-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Probability-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Gravity-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Mitigation-->
    </th>

    <th class="vertical"><div class="vertical">Manuality</div></th>
    <th class="vertical"><div class="vertical">Probability</div></th>
    <th class="vertical"><div class="vertical">Gravity</div></th>
    <th class="vertical"><div class="vertical">Mitigation</div></th>
  </tr>
</table>

- Shady Alset

1

<table border="1">
  <tr>
     <th style="transform: rotate(-90deg);width: 1px;padding: 10px;" className="rotateth">head 1</th>
     <th>head 2</th>
     <th>head 3</th>
     <th>head 4</th>
  </tr>
  <tr>
     <td>data 1</td>
     <td>data 2</td>
     <td>data 3</td>
     <td>data 4</td>
  </tr>
</table>

- Rahman Qadirzade

当回答一个旧问题时，如果您包含一些上下文来解释您的答案如何帮助，特别是对于已经有被接受答案的问题，那么您的答案将对其他StackOverflow用户更有用。请参阅：如何撰写好的答案。 - David Buck

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SantoshK · Accepted Answer

使用以下概念可以简单易行地创建旋转表头。

$(function() {
    var header_height = 0;
    $('.rotate-table-grid th span').each(function() {
        if ($(this).outerWidth() > header_height) header_height = $(this).outerWidth();
    });

    $('.rotate-table-grid th').height(header_height);
});

table.rotate-table-grid{box-sizing: border-box;
border-collapse: collapse;}
 .rotate-table-grid tr, .rotate-table-grid td, .rotate-table-grid th {
  border: 1px solid #ddd;
  position: relative;
  padding: 10px;
}
.rotate-table-grid th span {
  transform-origin: 0 50%;
  transform: rotate(-90deg); 
  white-space: nowrap; 
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="rotate-table-grid">
  <thead>
      <tr>
          <th><span>Shorter Title</span></th>
          <th><span>Much Much Longer Title</span></th>
           <th><span>Shorter Title</span></th>
          <th><span>Much Much Longer Title</span></th>
           <th><span>Shorter Title</span></th>
          <th><span>Much Much Longer Title</span></th>
           <th><span>Shorter Title</span></th>
          <th><span>Much Much Longer Title</span></th>
      </tr>
</thead>
<tbody>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
     <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
         <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
     <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
     <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</tbody>
</table>