如何在表头滚动垂直文本？

问题描述 投票：2回答：2

我有一个简单的表格，在表头有垂直文字，如。

FIDDLE

HTML & CSS

div.vertical {
  margin-left: -100px;
  position: absolute;
  width: 215px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}

th.vertical {
  height: 220px;
  line-height: 14px;
  padding-bottom: 25px;
  text-align: left;
}

div.vertical {
  margin-left: -100px;
  position: absolute;
  width: 215px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}

th.vertical {
  height: 220px;
  line-height: 14px;
  padding-bottom: 25px;
  text-align: left;
}

td,
th {
  padding: 5px;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}
<div class="row" style="margin-top: 20px;margin-left: 10px;">
  <div class="col-md-12">
    <div class="table-responsive">
      <table>
        <thead>
          <tr>
            <th class="vertical">
              <div class="vertical">Really long and complex 1</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 2</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 3</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

当我有很多列的时候，包裹表格的div会滚动，看起来像这样。

FIDDLE

但是，你可能已经注意到了 在滚动的时候，表头根本就没有滚动。我发现我在使用 position: absolute 在 div.vertical 类，因此发生了这种情况。但是，如果我删除了这个样式，那么头是可以滚动的，但是头的宽度却变得很大，就像你看到的那样。

FIDDLE

有什么办法可以让我们只用CSS就能同时拥有滚动和小头宽？谢谢！我有一个简单的表格，里面有垂直的文字，但它的标题宽度却变得很大，可以看到这里：有没有办法让我们只用CSS就能同时拥有滚动和小标题宽度？

html css twitter-bootstrap twitter-bootstrap-3
2个回答
2
投票

添加 position: relative 到 th.vertical

抚弄

div.vertical {
  margin-left: -100px;
  position: absolute;
  width: 215px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}

th.vertical {
  height: 220px;
  line-height: 14px;
  padding-bottom: 25px;
  text-align: left;
  position: relative;
}

td,
th {
  padding: 5px;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
}
<div class="row" style="margin-top: 20px;margin-left: 10px;">
  <div class="col-md-12">
    <div class="table-responsive">

      <table>
        <thead>
          <tr>
            <th class="vertical">
              <div class="vertical">Really long and complex 1</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 2</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 3</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 3</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 3</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 3</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 3</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 2</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>
</div>
0
投票

对于信息 。writing-mode

.vertical {
  writing-mode:vertical-lr
}
<div class="row" style="margin-top: 20px;margin-left: 10px;">
  <div class="col-md-12">
    <div class="table-responsive">

      <table>
        <thead>
          <tr>
            <th class="vertical">
              <div class="vertical">Really long and complex 1</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 2</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 3</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 3</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 3</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 3</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 3</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 2</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>

类似答案 : 在固定的div内旋转文字

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.