当前位置： 文江博客话题详情

创建以垂直方向文本作为表头的 HTML 表格

发布于 2025-01-08 11:58:03 字数 661 浏览 2 评论 0原文

我想创建一个 HTML 表格，其中垂直书写的文本作为标题（即标题文本旋转 90 度）。我正在使用以下样式，

<th style="-webkit-transform:rotate(90deg); writing-mode:tb-rl; -moz-transform:rotate(90deg); -o-transform: rotate(90deg); white-space:nowrap; display:blocking; padding-left:1px;padding-right:1px;padding-top:10px;padding-bottom:10px; " align="left"  id="#COLUMN_HEADER_NAME#">#COLUMN_HEADER#</th>

在 MS IE 9.x 中显示正常。在 Firefox 和 Chrome 中，标题似乎漂浮在表格顶部，它与其下方的表格行重叠。有人可以帮忙吗？我只是不知道为什么会发生这种情况。我从本教程开始： http://scottgale.com/blog /css-vertical-text/2010/03/01/

TIA，塔马斯

原文

I would like to create a HTML table with vertically written text as header (i.e. header text is rotated 90 degrees). I am using the flollowing style

<th style="-webkit-transform:rotate(90deg); writing-mode:tb-rl; -moz-transform:rotate(90deg); -o-transform: rotate(90deg); white-space:nowrap; display:blocking; padding-left:1px;padding-right:1px;padding-top:10px;padding-bottom:10px; " align="left"  id="#COLUMN_HEADER_NAME#">#COLUMN_HEADER#</th>

In MS IE 9.x is displays OK. In Firefox and Chrome the header seems to float over the top of the table, it overlaps with the table rows below it. can somebody please help? I simple have no idea why is this happening. I started out with this tutorial: http://scottgale.com/blog/css-vertical-text/2010/03/01/

TIA, Tamas

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

筱果果 2025-01-15 11:58:04

我不相信单独使用 CSS 旋转内容时可以改变 的高度。下面是我如何使用一些 jQuery 来做到这一点。

http://jsfiddle.net/tsYRQ/1004/

I don't believe you can get the height of the <th> to change when rotating it's contents with CSS alone. Below is how I do this with a bit of jQuery.

http://jsfiddle.net/tsYRQ/1004/

回复 原文
一袭水袖舞倾城 2025-01-15 11:58:04

来自 http://blog.petermares.com/2010/10/27/vertical-text-in-html-table-headers-for-webkitmozilla-browsers-without-using-images/

使用 CSS 旋转 元素内的元素（例如

）会导致列宽缩小到刚好可以容纳旋转的文本 - 但是行高不会根据需要增长。

适用于 Mac 上的 Chrome 和 Safari（至少对我来说）。

<html>
    <head>
        <style>
            th
            {
                background-color: grey;
                color: white;
                text-align: center;
                vertical-align: bottom;
                height: 150px;
                padding-bottom: 3px;
                padding-left: 5px;
                padding-right: 5px;
            }

            .verticalText
            {
                text-align: center;
                vertical-align: middle;
                width: 20px;
                margin: 0px;
                padding: 0px;
                padding-left: 3px;
                padding-right: 3px;
                padding-top: 10px;
                white-space: nowrap;
                -webkit-transform: rotate(-90deg); 
                -moz-transform: rotate(-90deg);                 
            };
        </style>
    </head>
    <body>

        <table>
            <tr>
                <th>Column 1</th>
                <th><div class="verticalText">Column 2</div></th>
                <th>Column 3</th>
                <th><div class="verticalText">Column 4</div></th>
                <th>Column 5</th>
                <th><div class="verticalText">Column 6</div></th>
                <th>Column 7</th>
                <th><div class="verticalText">Column 8</div></th>
                <th>Column 9</th>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
            </tr>
            <tr>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
            </tr>
        </table>

    </body>
</html>

From http://blog.petermares.com/2010/10/27/vertical-text-in-html-table-headers-for-webkitmozilla-browsers-without-using-images/

Using CSS to rotate an element (e.g. a <div>) within a <td> element causes the column width to shrink to just accomodate the rotated text - however the row height does not grow as needed.

Works in Chrome and Safari on Mac (for me at least).

<html>
    <head>
        <style>
            th
            {
                background-color: grey;
                color: white;
                text-align: center;
                vertical-align: bottom;
                height: 150px;
                padding-bottom: 3px;
                padding-left: 5px;
                padding-right: 5px;
            }

            .verticalText
            {
                text-align: center;
                vertical-align: middle;
                width: 20px;
                margin: 0px;
                padding: 0px;
                padding-left: 3px;
                padding-right: 3px;
                padding-top: 10px;
                white-space: nowrap;
                -webkit-transform: rotate(-90deg); 
                -moz-transform: rotate(-90deg);                 
            };
        </style>
    </head>
    <body>

        <table>
            <tr>
                <th>Column 1</th>
                <th><div class="verticalText">Column 2</div></th>
                <th>Column 3</th>
                <th><div class="verticalText">Column 4</div></th>
                <th>Column 5</th>
                <th><div class="verticalText">Column 6</div></th>
                <th>Column 7</th>
                <th><div class="verticalText">Column 8</div></th>
                <th>Column 9</th>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
            </tr>
            <tr>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
            </tr>
        </table>

    </body>
</html>
回复 原文
最笨的告白 2025-01-15 11:58:04

我认为有一种更简单的方法可以在表格单元格中获取垂直文本：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        td {
        text-align: center;
        }
        /*Creation of vertical text in cell*/
        .vertical_Text {

                display: block;
                color: #f00;

                -webkit-transform: rotate(-90deg); 
                -moz-transform: rotate(-90deg);                 
            };
    </style>
</head>
<body>
<table border="1" cellspacing="10" cellpadding="20">
    <thead>
        <tr>
            <!-- vertical cell -->
            <td rowspan="2"><span class="vertical_Text" title="vertical text">HEAD</span></td>
            <td>header1-2</td>
            <td colspan="3">header1-2</td>
        </tr>

        <tr>
            <td>header2-1</td>
            <td>header2-2</td>
            <td>header2-3</td>
            <td>header2-4</td>
        </tr>

    </thead>
    <tbody>

        <!-- tr*5>td{data-$/$}*5 -->
        <tr>
            <!-- vertical cell -->
            <td rowspan="5"><span  class="vertical_Text" title="vertical text">DATA</span></td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
</table>
</body>
</html>

I think there is an easier way to get vertical text in table cell:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        td {
        text-align: center;
        }
        /*Creation of vertical text in cell*/
        .vertical_Text {

                display: block;
                color: #f00;

                -webkit-transform: rotate(-90deg); 
                -moz-transform: rotate(-90deg);                 
            };
    </style>
</head>
<body>
<table border="1" cellspacing="10" cellpadding="20">
    <thead>
        <tr>
            <!-- vertical cell -->
            <td rowspan="2"><span class="vertical_Text" title="vertical text">HEAD</span></td>
            <td>header1-2</td>
            <td colspan="3">header1-2</td>
        </tr>

        <tr>
            <td>header2-1</td>
            <td>header2-2</td>
            <td>header2-3</td>
            <td>header2-4</td>
        </tr>

    </thead>
    <tbody>

        <!-- tr*5>td{data-$/$}*5 -->
        <tr>
            <!-- vertical cell -->
            <td rowspan="5"><span  class="vertical_Text" title="vertical text">DATA</span></td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
</table>
</body>
</html>
回复 原文
隔岸观火 2025-01-15 11:58:04

只需使用 CSS 即可完成

table th {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: right;
}


<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
table th {
    font-size: .85em;
    letter-spacing: .1em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: right;
}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>

simply you can do it with CSS

table th {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: right;
}


<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
table th {
    font-size: .85em;
    letter-spacing: .1em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: right;
}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>

回复 原文
~没有更多了~

关于作者

我的影子我的梦

暂无简介

文章
评论
30 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

诺曦

文章 0 评论 0

要走干脆点

文章 0 评论 0

把回忆走一遍

文章 0 评论 0

陌上青苔

文章 0 评论 0

Arthur

文章 0 评论 0

哄哄

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文