1

我在标题行中有一个带有倾斜文本的表格，唯一的问题是文本仍然使列的宽度变大。有没有办法将表格列压缩在一起，使它们大约是选择框的宽度？或者有没有办法将文本放在那里而不在标题中，也许只使用 a <div>or <p>？

这是我正在使用的小提琴：http: //jsfiddle.net/t9Krg/1/

.slanted {

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);


    white-space:nowrap;
    /*
    display:noblock;
    */
}

标题周围的边框只是为了看到额外的间距，稍后将被删除。

4

3 回答 3

2

如果您使用绝对定位，您可以将对象放置在页面上任何您喜欢的位置。但是为了使它们相对于表格正确定位，您需要将相对定位应用于它们的父元素。

所以对于这个标记：

<th class="slanted">
  <div>This is a heading</div>
</th>

您的 CSS 应如下所示：

.slanted {
  text-align:left;
  position:relative;   
  white-space:nowrap;
}

.slanted div {
  width:12em;
  position:absolute;
  top:4em;
  left:-1em;
  transform: rotate(-45deg);
}

您必须调整topandleft值才能使事情正确，但只要您不打算在标签中使用换行符，这应该不会太难。

链接到 JSFiddle

于 2013-11-04T15:51:15.347 回答
1

也许您可以尝试在 th 标签上使用 text-overflow 。我在这个答案中找到了一个例子：

表格单元格中的CSS文本溢出？

于 2013-11-04T15:50:51.447 回答
1

添加固定到 CSS 的位置

div{position:fixed;}

您将不得不使用其他一些东西，但这会导致列无法增长到您的内容。

http://jsfiddle.net/MathiasaurusRex/t9Krg/4/

于 2013-11-04T15:54:48.937 回答