Question

我在标题行中有一个带有倾斜文本的表，唯一的问题是文本仍然使列的宽度变大。有没有办法挤压表格列，使它们大约是选择框的宽度？或者有没有办法在没有标题的情况下将文本放在那里，也许只使用<div>或<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;
    */
}

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

Answer 1

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

所以对于这个标记：

<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);
}

您必须调整top和left值以使事情正确，但只要您不打算在标签中设置换行符，就不会太困难

Link to JSFiddle

Answer 2

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

CSS text-overflow in a table cell?

Answer 3

添加固定于CSS的位置

div{position:fixed;}

你必须使用其他一些东西，但这会导致列不会增长到你的内容。

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

格式化表头

3 个答案: