旋转表头

时间：2019-07-19 16:28:19

标签： html css twitter-bootstrap

我试图通过向每个标头添加一个类-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>

2 个答案:

答案 0 :(得分：1)

您可以尝试将每个文本放在一个跨度中，然后旋转跨度吗？ 您不能旋转表格单元格。 而且我还认为您需要设置转换原点。请参阅这篇文章：https://css-tricks.com/almanac/properties/t/transform-origin/

答案 1 :(得分：0)

啊。这里的技巧是将标题文本放在嵌套在<span>中的<div>中（请参阅this文章）：

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>

相关问题
最新问题