Question

我想构建一个带有倾斜列标题的表格，如下图所示。

但是我无法将倾斜的标题div与实际列对齐，文本溢出列标题。 here是我的代码的链接。

我的问题是我们如何将倾斜的列标题与其下方的列对齐并在其中包含文本？

以下是我的代码

<table>
<tr>
<td> 
    <div class="outerDiv"> 
      <div class="innerDiv">This is first column header </div>
    </div> 
</td> 
<td> 
    <div class="outerDiv"> 
      <div class="innerDiv">This is second column header</div> 
    </div>     
</td> 
<td> 
    <div class="outerDiv"> 
      <div class="innerDiv">This is third column header</div>  
    </div>
</td> 
</tr>
  <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr>
  <tr> <td> 4 </td> <td> 5 </td> <td> 6 </td> </tr>
  <tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr>
  <tr> <td> 10 </td> <td> 11 </td> <td> 12 </td> </tr>
</table>

CSS：

.outerDiv {
background: grey;
height: 200px;
width: 100px;
border: 1px solid black;
transform: skew(-30deg);
}

body, html {
height: 100%;
}

.innerDiv{
transform:skew(45deg);
writing-mode: vertical-lr;
}

body {
display: flex;
justify-content: center;
}

table {
border-collapse: collapse;
}

table, td, th {
border: 1px solid black;
}

Answer 1

这是另一次尝试。我将标题单元格更改为th。我添加了一个translateX来让它更好地排队。对于内部开发我颠倒它使文本看起来不好笑，然后旋转容器，使其仍然在容器后面倾斜。还添加了一些定位以使其看起来正确。

https://jsfiddle.net/b1mrksou/3/

我添加的CSS：

* {
  box-sixing: border-box;
}

.outerDiv {
  background: grey;
  height: 200px;
  width: 100px;
  border: 1px solid black;
  border-bottom: 0;
  border-left: 0;
  transform: skew(-30deg) translateX(58%);
}

th:first-child .outerDiv {
  border-left: 1px solid black;
  position: relative;
}

.innerDiv {
  position: absolute;
  width: 250px;
  height: 85px;
  bottom: -34%;
  left: 10px;
  transform: skew(30deg) rotate(-60deg);
  transform-origin: 0 0;
  text-align: left;
}

Answer 2

您可以使用writing-mode，伪元素transform以及margin的一些调整：

＆＃13;

table {
  margin-right: 6em;
}

th {
  padding: 0;
  position: relative
}

th>div {
  white-space:nowrap;
  margin: -1em -2em -1em 6em;/* tune this to your needs, you might also see & update  transform-origin */
  padding: 0;
  -webkit-writing-mode: vertical-lr;
  /* old Win safari */
  writing-mode: vertical-lr;
  writing-mode: tb-lr;
  transform: scale(-1, -1) rotate(45deg);
}

th:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: solid;
  transform: skew(-45deg);
  transform-origin: bottom left;
}

td {
  border: solid;
}

＆＃13;

<table>
  <tr>
    <th>
      <div class="innerDiv"> first </div>
    </th>
    <th>
      <div class="innerDiv">This is second column header</div>
    </th>
    <th>
      <div class="innerDiv">This is third header</div>
    </th>
  </tr>
  <tr>
    <td> 1 </td>
    <td> 2 </td>
    <td> 3 </td>
  </tr>
  <tr>
    <td> 4 </td>
    <td> 5 </td>
    <td> 6 </td>
  </tr>
  <tr>
    <td> 7 </td>
    <td> 8 </td>
    <td> 999999999999999 </td>
  </tr>
  <tr>
    <td> 10 </td>
    <td> 11 </td>
    <td> 12 </td>
  </tr>
</table>

＆＃13;

http://codepen.io/gc-nomade/pen/xqdNGN

Answer 3

这似乎是我能想到的最佳解决方案。 http://jsbin.com/yecevosunu

<!doctype html><style>
table { border-collapse: collapse;}
td {border: 1px solid #000;}
</style><table class=tilttable>
  <thead>
    <tr>
      <th>word</th>
      <th>words and more and more words</th>
      <th>two<br>words</th>
      <th>word</th>
    </tr>
  </thead>
  <tbody>
    <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>
<script>
function toDegrees (angle) {return angle * (180 / Math.PI);}
function toRadians (angle) {return angle * (Math.PI / 180);}

onload=function(){

var tilttables = document.getElementsByClassName('tilttable');

[].forEach.call(tilttables[0].rows[0].cells
, function (i) {
  i.style.verticalAlign = "bottom";
  i.innerHTML = "<div><div>" + i.innerHTML + "</div></div>";
  i.firstChild.firstChild.setAttribute('style',"transform-origin:top left;transform: rotate(-45deg);");
  tilt(i.firstChild.firstChild);
});

}
function tilt(d){
  var w = d.clientWidth;
  var h = d.clientHeight;

  d.parentElement.style.width = h*Math.cos(toRadians(45))+"px";
  d.style.whiteSpace="nowrap";
  d.parentElement.style.paddingTop = w*Math.sin(toRadians(45))+"px";
  d.parentElement.style.height = h*Math.sin(toRadians(45))+"px";
}

</script>

倾斜的柱头

3 个答案: