Html表格td宽度由垂直文本？答案

【问题标题】：Html table td width by vertical text?Html表格td宽度由垂直文本？
【发布时间】：2023-08-25 14:53:01
【问题描述】：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    

<div class="row">                  
    <table height="200"  class="table table-bordered table-striped table-highlight" >
        <tbody>
            <tr height="20">
                <td rowspan="3" width="4%" style="vertical-align: middle;"><p style="transform: rotate(270deg);white-space: nowrap;">1.I have here some long title</p></td>
                <td colspan="6" rowspan="3" width="384" >Here i have some text</td>
            </tr>
            <tr height="20">
            </tr>
            <tr height="20">
            </tr>
        </tbody>
    </table>
</div>


</body>
</html>

问题是我想要一个垂直文本并且我使用了 transform: rotate(270deg) 但它使 <td> 的宽度不起作用。我想要一个小的。喜欢：

Look here i have a picture

【问题讨论】：

标签： html css html-table width

【解决方案1】：

使用writing-mode，然后将文字旋转180度。

writing-mode CSS 属性定义文本行是水平还是垂直布局，以及块前进的方向。

MDN

p {
  white-space: nowrap;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <table height="200" class="table table-bordered table-striped table-highlight">
    <tbody>
      <tr height="20">
        <td rowspan="3">
          <p>1.I have here some long title</p>
        </td>
        <td colspan="6" rowspan="3" width="384">Here i have some text</td>
      </tr>
      <tr height="20">
      </tr>
      <tr height="20">
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

【解决方案2】：

p {
  word-break: break-all;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    

<div class="row">                  
    <table height="200"  class="table table-bordered table-striped table-highlight" >
        <tbody>
            <tr height="20">
                <td rowspan="3" width="4%" style="vertical-align: middle;padding: 2rem;"><p>1.I have here some long title</p></td>
                <td colspan="6" rowspan="3" width="384" >Here i have some text</td>
            </tr>
            <tr height="20">
            </tr>
            <tr height="20">
            </tr>
        </tbody>
    </table>
</div>


</body>
</html>

【讨论】：

thx 但我需要像我的 sn-p 中的垂直文本而不是 vertical-align 。我需要类似 transform: rotate(270deg)

【解决方案3】：

//截图如下

1.我这里有一些长标题。这里我有一些文字这里我有一些文字

<tr>
<td style="vertical-align: middle;" rowspan="3" >
<p style="transform: rotate(270deg);"><span style="word-wrap: break-word;  white-space: nowrap; color: red;">1.I have here some long title</span></p>
</td>
<td colspan="6" rowspan="3" width="384"><p style="max-width:40px;">Here i have some text. Here I have some text</p></td>
</tr>

<tr>
<td style="vertical-align: middle;" rowspan="3">
<p style="transform: rotate(270deg);"><span style="word-wrap: break-word;  white-space: nowrap; color: red;">1.I have here some long title</span></p>
</td>
<td colspan="6" rowspan="3" width="384"><p style="max-width:40px;">Here i have some text. Here I have some text</p></td>
</tr>
</tbody>
</table>`enter code here`
</div>[![screenshot below][1]][1]


  [1]: https://i.stack.imgur.com/6lfdT.png

【讨论】：

谢谢回答，但你和我有同样的问题。看看你的照片。看看我的问题，它是关于宽度的。看看我的照片我需要什么。