html - 如何设置垂直 HTML 列的宽度？

问题描述

我正在尝试用 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>

标签： htmlcsshtml-table

html - 如何设置垂直 HTML 列的宽度？

问题描述

解决方案

推荐阅读