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
How to Style Selected Option Color Separately from Disabled Option
How to Remove Free Spaces Between Divs
Zoom to Fit: Pdf Embedded in HTML
Responsive Fullscreen Youtube Video With No Black Bars
Bootstrap Accordion Issue With Arrow
How to Vertically Align Elements in a Div
Recommended Way to Embed Pdf in Html
My Inline-Block Elements Are Not Lining Up Properly
Stylesheet Not Loaded Because of Mime-Type
Floated Elements of Variable Height Push Siblings Down
Make First Column Fixed and Next Column Scrollable in HTML Table
Having Difficulty Understanding How to Remove Some Padding
Where Is the Extra Space Coming from Around This Textarea
How to Make an Element Width: 100% Minus Padding
≪Button≫ Vs. ≪Input Type="Button" /≫. Which to Use