css，带垂直标题的表

我试图在垂直标题的HTML中构建表。我找到了我在找的东西： http://codepen.io/chriscoyier/pen/Fapif css，带垂直标题的表

但是我不能重现它，而且我也不明白为什么。

我的代码是：

<html> 
    <head> 
     <style type="text/css"> 

     .table-header-rotated { 
      border-collapse: collapse; 
      .csstransforms & td { 
      width: 30px; 
      } 
      .no-csstransforms & th { 
      padding: 5px 10px; 
      } 
      td { 
      text-align: center; 
      padding: 10px 5px; 
      border: 1px solid #ccc; 
      } 
      .csstransforms & th.rotate { 
      height: 140px; 
      white-space: nowrap; 
      // Firefox needs the extra DIV for some reason, otherwise the text disappears if you rotate 
      > div { 
       transform: 
        // Magic Numbers 
        translate(25px, 51px) 
        // 45 is really 360-45 
        rotate(315deg); 
       width: 30px; 
      } 
      > div > span { 
       border-bottom: 1px solid #ccc; 
       padding: 5px 10px; 
      } 
      } 
      th.row-header { 
      padding: 0 10px; 
      border-bottom: 1px solid #ccc; 
      } 
     } 

     </style> 
    </head> 
    <body> 
<table class="table table-header-rotated"> 
    <thead> 
    <tr> 
     <!-- First column header is not rotated --> 
     <th></th> 
     <!-- Following headers are rotated --> 
     <th class="rotate"><div><span>Column header 1</span></div></th> 
     <th class="rotate"><div><span>Column header 2</span></div></th> 
     <th class="rotate"><div><span>Column header 3</span></div></th> 
     <th class="rotate"><div><span>Column header 4</span></div></th> 
     <th class="rotate"><div><span>Column header 5</span></div></th> 
     <th class="rotate"><div><span>Column header 6</span></div></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <th class="row-header">Row header 1</th> 
     <td><input checked="checked" name="column1[]" type="radio" value="row1-column1"></td> 
     <td><input checked="checked" name="column2[]" type="radio" value="row1-column2"></td> 
     <td><input name="column3[]" type="radio" value="row1-column3"></td> 
     <td><input name="column4[]" type="radio" value="row1-column4"></td> 
     <td><input name="column5[]" type="radio" value="row1-column5"></td> 
     <td><input name="column6[]" type="radio" value="row1-column6"></td> 
    </tr> 
    <tr> 
     <th class="row-header">Row header 2</th> 
     <td><input name="column1[]" type="radio" value="row2-column1"></td> 
     <td><input name="column2[]" type="radio" value="row2-column2"></td> 
     <td><input checked="checked" name="column3[]" type="radio" value="row2-column3"></td> 
     <td><input checked="checked" name="column4[]" type="radio" value="row2-column4"></td> 
     <td><input name="column5[]" type="radio" value="row2-column5"></td> 
     <td><input name="column6[]" type="radio" value="row2-column6"></td> 
    </tr> 
    <tr> 
     <th class="row-header">Row header 3</th> 
     <td><input name="column1[]" type="radio" value="row3-column1"></td> 
     <td><input name="column2[]" type="radio" value="row3-column2"></td> 
     <td><input name="column3[]" type="radio" value="row3-column3"></td> 
     <td><input name="column4[]" type="radio" value="row3-column4"></td> 
     <td><input checked="checked" name="column5[]" type="radio" value="row3-column5"></td> 
     <td><input checked="checked" name="column6[]" type="radio" value="row3-column6"></td> 
    </tr> 
    </tbody> 
</table> 

</body> 
</html>

这里一个的jsfiddle：https://jsfiddle.net/n00tevvs/

来源

2015-04-02 user3636476

这将工作，运用它

th.rotate { 
    /* Something you can count on */ 
    height: 140px; 
    white-space: nowrap; 
} 

th.rotate > div { 
    transform: 
    /* Magic Numbers */ 
    translate(25px, 51px) 
    /* 45 is really 360 - 45 */ 
    rotate(315deg); 
    width: 30px; 
} 
th.rotate > div > span { 
    border-bottom: 1px solid #ccc; 
    padding: 5px 10px; 
} 
/* These aren't needed and will be weird if transforms don't work */ 
.csstransforms & th.rotate { 
    height: 140px; 
    white-space: nowrap; 
}

来源

2015-04-02 11:50:28

CSS

.table-header-rotated { 
    border-collapse: collapse; 
} 
.table-header-rotated td { 
    width: 30px; 
} 
.table-header-rotated th { 
    padding: 5px 10px; 
} 
.table-header-rotated td { 
    text-align: center; 
    padding: 10px 5px; 
    border: 1px solid #ccc; 
} 
.table-header-rotated th.rotate { 
    height: 140px; 
    white-space: nowrap; 
} 
.table-header-rotated th.rotate > div { 
    -webkit-transform: translate(25px, 51px) rotate(315deg); 
     -ms-transform: translate(25px, 51px) rotate(315deg); 
      transform: translate(25px, 51px) rotate(315deg); 
    width: 30px; 
} 
.table-header-rotated th.rotate > div > span { 
    border-bottom: 1px solid #ccc; 
    padding: 5px 10px; 
} 
.table-header-rotated th.row-header { 
    padding: 0 10px; 
    border-bottom: 1px solid #ccc; 
}

DEMO

检查天气你有SASS代码或正常的CSS代码。

来源

2015-04-02 11:37:16

css，带垂直标题的表

回答

相关问题