如何设置垂直 HTML 列的宽度？答案

【问题标题】：How to set width for vertical HTML columns?如何设置垂直 HTML 列的宽度？
【发布时间】：2019-02-26 16:18:18
【问题描述】：

我正在尝试用 HTML 编写表格；我找到了在垂直文本中制作表格第一行的代码，但我遇到了列的填充或宽度问题。

我希望它们在第二行中尽可能宽（会有更多行，但只是举例），但它似乎有不必要的填充。我尝试在 CSS 中使用 column-width 属性，并在我的 tpl 中使用 col 宽度（在我定义表格之后），但没有任何效果。

我希望该列与其最长的输入一样宽（在第一列和最后一列中将有单词，在其他列中将是从 1 到 5 的数字）。我该怎么做？

还有一件事：如果我将样式中的 text-align 属性更改为左对齐，为什么第一行不左对齐？

这是我现在拥有的，也是我想要实现的：

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <style> 
    .verticalTableHeader {
        text-align:center;
        white-space:nowrap;
        transform-origin:50% 50%;
        transform: rotate(-90deg);
    }
    .verticalTableHeader:before {
        content:'';
        padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
        display:inline-block;
        vertical-align:middle;
    }
    </style>

 </head>        
 <body>

    <br>
    <center>
    <table border="1">
        <tr>
            <th class="verticalTableHeader">Breed</th>
            <th class="verticalTableHeader">Option 1</th>
            <th class="verticalTableHeader">Option 2</th>
            <th class="verticalTableHeader">Option 3</th>
            <th class="verticalTableHeader">Option 4</th>
            <th class="verticalTableHeader">Option 5</th>
            <th class="verticalTableHeader">Option 6</th>
            <th class="verticalTableHeader">Option 7</th>
            <th class="verticalTableHeader">Option 8</th>
            <th class="verticalTableHeader">Option 9</th>
            <th class="verticalTableHeader">Option 10</th>
            <th class="verticalTableHeader">Option 11</th>
            <th class="verticalTableHeader">Option 12</th>
            <th class="verticalTableHeader">Option 13</th>
            <th class="verticalTableHeader">Option 14</th>
            <th class="verticalTableHeader">Option 15</th>
            <th class="verticalTableHeader">Option 16</th>
            <th class="verticalTableHeader">Option 17</th>
            <th class="verticalTableHeader">Option 18</th>
            <th class="verticalTableHeader">Option 19</th>
            <th class="verticalTableHeader">Option 20</th>
            <th class="verticalTableHeader">Option 21</th>
            <th class="verticalTableHeader">Option 22</th>
        </tr>
        <tr>
            <td>American pitbull</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>26</td>
            <td>Hunting dogs</td>
        </tr>
    </table>
    </center>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

【问题讨论】：

标签： html css html-table

【解决方案1】：

你想做的事情可以完成，但你必须根据最长的单词对齐行，而如果你谈论左对齐，你可以做到这一点，错误就在这一行

        white-space:nowrap;

这条线不允许他去左手边……如果你能描述主要目标，那会很有帮助……

【讨论】：

谢谢。我添加了一张图片，希望它能显示我想要实现的目标。
@MocS 尝试使用开发人员选项并根据您的需要自行编辑样式..

【解决方案2】：

如果要旋转列的文本，只需使用 CSS Style Rotate。 Reference

$(document).ready(function() {
 $('.rotate').each(function()
  {
    $(this).css('height', $(this).css('width'));
  });
 
});

.rotate {
  /* FF3.5+ */
  -moz-transform: rotate(-90.0deg);
  /* Opera 10.5 */
  -o-transform: rotate(-90.0deg);
  /* Saf3.1+, Chrome */
  -webkit-transform: rotate(-90.0deg);
  /* IE6,IE7 */
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  /* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
  /* Standard */
  transform: rotate(-90.0deg);
  position: relative;
  left: 50%;
  top: 50%;
}

table td, table th
{
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<th><div class="rotate">Breed</div></th>
<th><div class="rotate">Option1</div></th>
<th><div class="rotate">Option2</div></th>
</tr>
<tr>
<td>American pitbull</td>
<td>3</td>
<td>3</td>
</tr>
</table>

【讨论】：

【解决方案3】：

试试下面的代码

    .verticalTableHeader {
        text-align:center;
        white-space:nowrap;
        transform-origin:50% 50%;
        transform: rotate(-90deg);
    }
    .verticalTableHeader:before {
        content:'';
        padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
        display:inline-block;
        vertical-align:middle;
    }
    
td {
   width: 30%;
   text-align: center;
}

td:first-child, td:last-child {  
   white-space:nowrap;
}

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    </head>
 <body>


    <br>
    <center>
    <table border="1">
        <tr>
            <th class="verticalTableHeader">Breed</th>
            <th class="verticalTableHeader">Option 1</th>
            <th class="verticalTableHeader">Option 2</th>
            <th class="verticalTableHeader">Option 3</th>
            <th class="verticalTableHeader">Option 4</th>
            <th class="verticalTableHeader">Option 5</th>
            <th class="verticalTableHeader">Option 6</th>
            <th class="verticalTableHeader">Option 7</th>
            <th class="verticalTableHeader">Option 8</th>
            <th class="verticalTableHeader">Option 9</th>
            <th class="verticalTableHeader">Option 10</th>
            <th class="verticalTableHeader">Option 11</th>
            <th class="verticalTableHeader">Option 12</th>
            <th class="verticalTableHeader">Option 13</th>
            <th class="verticalTableHeader">Option 14</th>
            <th class="verticalTableHeader">Option 15</th>
            <th class="verticalTableHeader">Option 16</th>
            <th class="verticalTableHeader">Option 17</th>
            <th class="verticalTableHeader">Option 18</th>
            <th class="verticalTableHeader">Option 19</th>
            <th class="verticalTableHeader">Option 20</th>
            <th class="verticalTableHeader">Option 21</th>
            <th class="verticalTableHeader">Option 22</th>
        </tr>
        <tr>
            <td>American pitbull</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>26</td>
            <td>Hunting dogs</td>
        </tr>
    </table>
    </center>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

【讨论】：