Question

我想使用CSS转换属性将旋转的文本显示为表头。标题行应根据需要调整其高度，但旋转的文本只会溢出：

example wrong

我的问题是，如何让表格标题按需增长？基本上它应该是这样的：

example right

Answer 1

作为一个老问题，这更像是关于垂直边距或填充的信息或提醒，以父级宽度作为参考。

如果使用伪元素和垂直填充，则可以基本绘制方框或<td>： http://jsfiddle.net/qjzwG/319/

.verticalTableHeader {
    text-align:center;
    white-space:nowrap;
    transform-origin:50% 50%;
    transform: rotate(90deg);

}
.verticalTableHeader:before {
    content:'';
    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
    display:inline-block;
    vertical-align:middle;
}

如果您希望保持<td>小宽度，table-layout:fixed + width可能会有所帮助。 http://jsfiddle.net/qjzwG/320/

.verticalTableHeader {
    text-align:center;
    white-space:nowrap;
    transform: rotate(90deg);

}
.verticalTableHeader p {
    margin:0 -100% ;
    display:inline-block;
}
.verticalTableHeader p:before{
    content:'';
    width:0;
    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
    display:inline-block;
    vertical-align:middle;
}
table {
    text-align:center;
    table-layout : fixed;
    width:150px
}

如果您希望表格仍然可以从其内容增长而不是从<th>的宽度增长，则使用与文档的目录/方向相反的hudge负边距的包装可能会：显然，最符合您需求的，http://jsfiddle.net/qjzwG/320/

<table border="1">
    <tr>
      <th class="verticalTableHeader"><p>First</p></th>
      <th class="verticalTableHeader"><p>Second-long-header</p></th>
      <th class="verticalTableHeader"><p>Third</p></th>
    </tr>

.verticalTableHeader {
    text-align:center;
    white-space:nowrap;
    transform: rotate(90deg);
}
.verticalTableHeader p {
    margin:0 -999px;/* virtually reduce space needed on width to very little */
    display:inline-block;
}
.verticalTableHeader p:before {
    content:'';
    width:0;
    padding-top:110%;
    /* takes width as reference, + 10% for faking some extra padding */
    display:inline-block;
    vertical-align:middle;
}
table {
    text-align:center;
}

来自demo和base的HTML：

<table border="1">
    <tr>
      <th class="verticalTableHeader">First</th>
      <th class="verticalTableHeader">Second</th>
      <th class="verticalTableHeader">Third</th>
    </tr>
    <tr>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
    </tr>
</table>

对于较旧的IE，您需要使用书写模式（CSS）：http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx

Answer 2

有新的（实验性）CSS3功能可以完成这一功能：writing-mode。

您必须将其应用于表格单元格内的div：

.vrt-header th {
  writing-mode: vertical-lr;
  min-width: 50px; /* for firefox */
}

<table class='vrt-header'>
  <thead>
    <tr>
      <th>First</th><th>Second</th><th>Third</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>foo</td><td>foo</td><td>foo</td>
    </tr>
    <tr>
      <td>foo</td><td>foo</td><td>foo</td>
    </tr>
    <tr>
      <td>foo</td><td>foo</td><td>foo</td>
    </tr>
  </tbody>
</table>

感谢@gman - 它适用于Firefox但不适用于Chrome。可以将th中的div内容包含在Chrome js-fiddle demo中以获得垂直文本，但感觉就像是一个kludge。

Answer 3

嗯......我知道这不是最好的解决方案，但你可以用客户端javascript来纠正它。在jQuery中它看起来像这样：

$(".verticalTableHeader").each(function(){$(this).height($(this).width())})

对于纯HTML或CSS解决方案，我认为这是浏览器限制。

Answer 4

使用

writing-mode: vertical-lr;

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Answer 5

我很难使我的<th>完全按照我的要求对齐（即使有些是多行）。
这对我有用：

html    { font-family: Helvetica; }
table   { border-collapse: collapse; }
td, th  { border: 1px solid BurlyWood; }
td      { text-align: center; }
th      { background-color: NavajoWhite; 
          color: SaddleBrown; 
          width:50px;  
          vertical-align: bottom; }
th span { writing-mode: sideways-lr; /* +90°: use 'tb-rl' */
          text-align: left;          /* +90°: use 'right' */
          padding:10px 5px 0; }

<table>
    <tr>
      <th><span>First</span></th>
      <th><span>Second</span></th>
      <th><span>Third<br>Column</span></th>
    </tr>
    <tr>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
    </tr>
</table>

我认为我愿意分享，部分作为“未来我”的参考。 ?

Answer 6

我很难让这些调整以一致的方式工作。以防万一这对某人有帮助，我的解决方案是创建垂直文本的图像。

Answer 7

<thead><tr><th class="rotate"><div>header 1></div></th><th class="rotate"><div>header 2></div></th></tr></thead>

应用CSS旋转类

th.rotate {
        height: 110px; /* header height */
        white-space: nowrap;
    }

th.rotate > div {
    transform:
       translate(25px, 51px)
       rotate(90deg);
       /* rotate(315deg); for diagnol */
    width: 30px;
    margin-left: -35px;
    margin-top: -30px;
}

Answer 8

这对我有用

css

.v-text {
    transform: rotate(270deg);
    display: block;
 }

html

<table>
  <th>HEADER 1</th>
  <th>
    <p class="v-text">VERTICAL</p>
  </th>
<table>

Answer 9

尝试一下：

ifelse

.vertical-header span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
  max-height: 150px;
}

Answer 10

为了避免使用js，我建议在第一行表格中使用flex。标头中的边框有些混乱，但可以在精简设置中解决：

.header-row {
  display: flex;
  flex-direction: row;
}

span {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    width: 23px;
    border-left: 1px solid black;
}

table {
  border: 1px solid black;
  border-spacing: 0px;
}

td {
  border: 1px solid black;
  width: 20px;
}

<table>
  <tr>
    <td></td>
    <td colspan="5" style="padding:0;border:none">
      <div class="header-row">
        <span>Header fsdafasd</span>
        <span>Header fsda</span>
        <span>Header fsdafa fsdaf</span>
        <span>Header asdf</span>
        <span>Header fsda</span>
      </div>
    </td>
  </tr>
  <tr>
    <td>Test name fadsf</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Test name</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Test name</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>4</td>
  </tr>
</table>

Answer 11

print( bytes(xstr,'latin1').decode()); print(xstr.encode("latin1").decode())

https://jsfiddle.net/amrangry/w4ja3qo2/1/

如何在自动高度/没有文本溢出的表格标题中显示垂直文本？

11 个答案: