Slanted Column Headers

Slanted column heading - SSRS reports

In a word, no, SSRS won't do this. 90 degree rotated text is possible as you've probably seen

You actually have two problems:
1. Slanted text.
2. Non rectangle cells.

There are potential workaround to solve the first problem: create a text graphic on the fly, use stylesheet tricks, &c.

But the second problem will be very difficult if not entirely impossible to solve. SSRS, and many of the formats to which it exports, only support rectangle cells.

Rotate table header

Ah. The trick here is to put the header text in a <span> nested in a <div> (see this article):

th.rotated-text {    height: 140px;    white-space: nowrap;    padding: 0 !important;}
th.rotated-text > div { transform: translate(13px, 0px) rotate(310deg); width: 30px;}
th.rotated-text > div > span { padding: 5px 10px;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div class="row mt-4"> <div class="col-md-3"></div> <div class="col-xs-12 col-md-6"> <table class="table table-hover"> <thead class="membership-tiers text-left"> <tr> <th scope="col"></th> <th class="rotated-text" scope="col"><div><span>View page 1</span></div></th> <th class="rotated-text" scope="col"><div><span>View page 2</span></div></th> <th class="rotated-text" scope="col"><div><span>Contact James</span></div></th> <th class="rotated-text" scope="col"><div><span>Contact Alan</span></div></th> <th class="rotated-text" scope="col"><div><span>View James' profile</span></div></th> <th class="rotated-text" scope="col"><div><span>View Alan's data</span></div></th> <th class="rotated-text" scope="col"><div><span>Edit page 1</span></div></th> <th class="rotated-text" scope="col"><div><span>Edit page 2</span></div></th> <th class="rotated-text" scope="col"><div><span>Delete page 1</span></div></th> </tr> </thead> <tbody> <tr> <th scope="row">James</th> <td>V</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>V</td> <td>X</td> </tr> <tr> <th scope="row">Alan</th> <td>V</td> <td>V</td> <td>X</td> <td>X</td> <td>V</td> <td>X</td> <td>V</td> <td>V</td> <td>X</td> </tr> <tr> <th scope="row">Emma</th> <td>V</td> <td>V</td> <td>V</td> <td>V</td> <td>V</td> <td>V</td> <td>V</td> <td>V</td> <td>V</td> </tr> </tbody> </table> </div> <div class="col-md-3"></div> </div>


Related Topics



Leave a reply



Submit