html - 如何滚动表格标题中的垂直文本？

Question

我有一个简单的表格，标题中带有垂直文本，例如:

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

但是，正如您在滚动时可能已经注意到的那样，标题根本没有滚动。我发现我在 div.vertical 类中使用了 position:absolute ，因此发生了这种情况。但是，如果我删除该样式，则标题会滚动，但标题宽度会变大，如下所示:

FIDDLE

有什么方法可以只使用 CSS 实现滚动和小标题宽度？ 谢谢!

Answer 1

将position:relative添加到th.vertical

fiddle

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>