<!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

最佳答案

使用writing-mode,然后将文本旋转180度。


  书写模式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>

10-05 20:51
查看更多