时间戳

首页 > 解决方案 > 旋转表头

html - 旋转表头

问题描述

我试图-60°通过向每个标题添加一个类rotated-text来旋转引导 4 表中的标题：

<table class="table table-hover">
    <thead class="text-left">
        <th class="rotated-text" scope="col">Col 1 header</th>
    </thead>

    [...]


.rotated-text {
    -webkit-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);
    font-size: larger;
}

但是，这会导致标题被换行，并且文本并未真正与标题/行边框左对齐（请参见下面的代码段）。我怎样才能解决这个问题？ 

.rotated-text {
    -webkit-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);

    font-size: larger;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

 <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        
<div class="row mt-4">
        <div class="col-md-3"></div>
        <div class="col-xs-12 col-md-6">
            <table class="table table-hover">
                <thead class="membership-tiers text-left">
                <tr>
                    <th scope="col"></th>
                    <th class="rotated-text" scope="col">View page 1</th>
                    <th class="rotated-text" scope="col">View page 2</th>
                    <th class="rotated-text" scope="col">Contact James</th>
                    <th class="rotated-text" scope="col">View James' profiles</th>
                    <th class="rotated-text" scope="col">View Alan' data</th>
                    <th class="rotated-text" scope="col">Contact Alan</th>
                    <th class="rotated-text" scope="col">Edit page 1</th>
                    <th class="rotated-text" scope="col">Edit page 2</th>
                    <th class="rotated-text" scope="col">Delete page 1</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">James</th>
                    <td>V</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>V</td>
                    <td>X</td>
                </tr>
                <tr>
                    <th scope="row">Alan</th>
                    <td>V</td>
                    <td>V</td>
                    <td>X</td>
                    <td>X</td>
                    <td>V</td>
                    <td>X</td>
                    <td>V</td>
                    <td>V</td>
                    <td>X</td>
                </tr>
                <tr>
                    <th scope="row">Emma</th>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-3"></div>
    </div>

标签： htmlcsstwitter-bootstrap

解决方案

啊。这里的诀窍是将标题文本<span>嵌套在 a 中<div>（请参阅本文）：

th.rotated-text {
    height: 140px;
    white-space: nowrap;
    padding: 0 !important;
}

th.rotated-text > div {
    transform:
        translate(13px, 0px)
        rotate(310deg);
    width: 30px;
}

th.rotated-text > div > span {
    padding: 5px 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

 <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        
<div class="row mt-4">
        <div class="col-md-3"></div>
        <div class="col-xs-12 col-md-6">
            <table class="table table-hover">
                <thead class="membership-tiers text-left">
                <tr>
                    <th scope="col"></th>
                    <th class="rotated-text" scope="col"><div><span>View page 1</span></div></th>
                    <th class="rotated-text" scope="col"><div><span>View page 2</span></div></th>
                    <th class="rotated-text" scope="col"><div><span>Contact James</span></div></th>
                    <th class="rotated-text" scope="col"><div><span>Contact Alan</span></div></th>
                    <th class="rotated-text" scope="col"><div><span>View James' profile</span></div></th>
                    <th class="rotated-text" scope="col"><div><span>View Alan's data</span></div></th>
                    <th class="rotated-text" scope="col"><div><span>Edit page 1</span></div></th>
                    <th class="rotated-text" scope="col"><div><span>Edit page 2</span></div></th>
                    <th class="rotated-text" scope="col"><div><span>Delete page 1</span></div></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">James</th>
                    <td>V</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>V</td>
                    <td>X</td>
                </tr>
                <tr>
                    <th scope="row">Alan</th>
                    <td>V</td>
                    <td>V</td>
                    <td>X</td>
                    <td>X</td>
                    <td>V</td>
                    <td>X</td>
                    <td>V</td>
                    <td>V</td>
                    <td>X</td>
                </tr>
                <tr>
                    <th scope="row">Emma</th>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-3"></div>
    </div>

推荐阅读