<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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>

.table-header-rotated { border-collapse: collapse; } .csstransforms .table-header-rotated td { width: 30px; } .no-csstransforms .table-header-rotated th { padding: 5px 10px; } .table-header-rotated td { text-align: center; padding: 10px 5px; border: 1px solid #ccc; } .csstransforms .table-header-rotated th.rotate { height: 140px; white-space: nowrap; } .csstransforms .table-header-rotated th.rotate > div { -webkit-transform: translate(25px, 51px) rotate(315deg); transform: translate(25px, 51px) rotate(315deg); width: 30px; } .csstransforms .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; }