表头中的CSS垂直文本不滚动

时间：2017-04-24 08:11:51

标签： html css twitter-bootstrap twitter-bootstrap-3

我有一个简单的表格，标题中有垂直文字，如：

FIDDLE

HTML＆amp; CSS

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

当我有很多列时，包裹表格的div会滚动，如下所示：

FIDDLE

但是，正如您可能已经注意到滚动标题时根本不滚动。我发现我在position: absolute课程中使用了div.vertical，因此发生了这种情况。但是，如果我删除该样式然后标题滚动，但标题宽度变大，如您所见：

FIDDLE

我们有没有办法只使用CSS滚动和小标题宽度？ 谢谢！

2 个答案:

答案 0 :(得分：2)

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

答案 1 :(得分：0)

对于infos：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>

类似的答案：Rotating Text Within A Fixed Div

相关问题
最新问题