Given the following example HTML and CSS
TableStyleExample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Style Example</title>
<link rel="stylesheet" type="text/css" href="TableStyleExample.css" />
</head>
<body>
<div class="bodyDiv">
<div class="schedTableDiv">
<table class="schedTable">
<!-- Sunday, June 11th -->
<tr>
<td class="schedLeftCol" rowspan="8"><p class=".schedLeftVerbiage">Sun. 6/11</p></td>
<td class="schedMidColDark">Opening Meeting</td>
<td class="schedRightCol">2:00 PM - 3:00 PM</td>
</tr>
<tr>
<td class="schedMidColLight">Hemisfair C1</td>
<td class="schedRightCol"> </td>
</tr>
<tr>
<td class="schedMidColDark">Show Hours</td>
<td class="schedRightCol">3:00 PM - 5:00 PM</td>
</tr>
<tr>
<td class="schedMidColLight">Exhibit Hall 4</td>
<td class="schedRightCol"> </td>
</tr>
<tr>
<td class="schedMidColDark">Vendor Consideration Exhibit</td>
<td class="schedRightCol">3:00 PM - 5:00 PM</td>
</tr>
<tr>
<td class="schedMidColLight">Exhibit Hall 4</td>
<td class="schedRightCol"> </td>
</tr>
<tr>
<td class="schedMidColDark">Member and Vendor Social</td>
<td class="schedRightCol">5:00 PM - 7:00 PM</td>
</tr>
<tr>
<td class="schedMidColLight" colspan="2" style="border-bottom: 2px solid grey;">
LDR & Grotto <span style="color: red;">sponsored by Cap America & Founder Sport Group</span>
</td>
</tr>
<!-- Monday, June 12th -->
<tr>
<td class="schedLeftCol" rowspan="14"><p class=".schedLeftVerbiage">Mon. 6/12</p></td>
<td class="schedMidColDark">Continental Breakfast</td>
<td class="schedRightCol">8:00 AM - 9:00 AM</td>
</tr>
<tr>
<td class="schedMidColLight">Hemisfair C1 Foyer</td>
<td class="schedRightCol"> </td>
</tr>
<tr>
<td class="schedMidColDark">Keynote Speaker: Sterling Hawkins</td>
<td class="schedRightCol">9:00 AM - 10:00 AM</td>
</tr>
<tr>
<td class="schedMidColLight">Hemisfair C1</td>
<td class="schedRightCol"> </td>
</tr>
<tr>
<td class="schedMidColDark">Owner's Meeting: Member Health Insurance</td>
<td class="schedRightCol">10:30 AM - 11:00 AM</td>
</tr>
<tr>
<td class="schedMidColLight">Room 207</td>
<td class="schedRightCol"> </td>
</tr>
<tr>
<td class="schedMidColDark">Show Hours</td>
<td class="schedRightCol">10:00 AM - 5:00 PM</td>
</tr>
<tr>
<td class="schedMidColLight">Exhibit Hall 4</td>
<td class="schedRightCol"> </td>
</tr>
<tr>
<td class="schedMidColDark">Vendor Presentations</td>
<td class="schedRightCol">11:00 AM - 4:30 PM</td>
</tr>
<tr>
<td class="schedMidColLight">Show Floor Presentation Rooms</td>
<td class="schedRightCol"> </td>
</tr>
<tr>
<td class="schedMidColDark">Vendor Consideration Exhibit</td>
<td class="schedRightCol">10:00 AM - 5:00 PM</td>
</tr>
<tr>
<td class="schedMidColLight">Exhibit Hall 4</td>
<td class="schedRightCol"> </td>
</tr>
<tr>
<td class="schedMidColDark">Happy Hour</td>
<td class="schedRightCol">3:30 PM - 5:00 PM</td>
</tr>
<tr>
<td class="schedMidColLight" style="border-bottom: 2px solid grey;">Exhibit Hall 4</td>
<td class="schedRightCol" style="border-bottom: 2px solid grey; color: red; font-weight: normal;" >sponsored by Chipply</td>
</tr>
<!-- Tuesday, June 13th -->
<tr>
<td class="schedLeftCol" rowspan="6" style="border: none"><p class=".schedLeftVerbiage">Tues. 6/12</p></td>
<td class="schedMidColDark">Continental Breakfast</td>
<td class="schedRightCol">7:00 AM - 8:00 AM</td>
</tr>
<tr>
<td class="schedMidColLight">Exhibit Hall 4 Foyer</td>
<td class="schedRightCol"> </td>
</tr>
<tr>
<td class="schedMidColDark">Show Hours</td>
<td class="schedRightCol">8:00 AM - 11:00 AM</td>
</tr>
<tr>
<td class="schedMidColLight">Exhibit Hall 4</td>
<td class="schedRightCol"> </td>
</tr>
<tr>
<td class="schedMidColDark">Vendor Consideration Exhibit</td>
<td class="schedRightCol">8:00 AM - 11:00 AM</td>
</tr>
<tr>
<td class="schedMidColLight">Exhibit Hall 4</td>
<td class="schedRightCol"> </td>
</tr>
</table>
</div> <!-- END schedTableDiv -->
</div> <!-- END bodyDiv -->
</body>
</html>
TableStyleExample.css
body {
margin: 0;
padding: 0;
}
.bodyDiv {
position: relative;
width: 100%;
height: 100%;
}
div {
position: absolute;
width: 100%;
text-align: center;
}
p {
font-family: "Arial", arial, sans-serif;
padding: 0;
}
.schedTableDiv {
top: 15%;
}
.schedTable {
font-family: "Arial", arial, sans-serif;
width: 100%;
font-size: 8pt;
padding: 0;
border-spacing: 0;
border-collapse: collapse;
}
.schedLeftCol {
width: 8.25%;
font-size: 11pt;
color: grey;
border-bottom: 2px solid grey;
-webkit-transform: rotate(-90deg);
padding: 0;
margin: 0;
}
p.schedLeftVerbiage {
font-size: 11pt;
font-weight: normal;
}
.schedMidColDark {
text-align: left;
width: 60.5%;
color: black;
font-weight: bold;
border-left: 2px solid grey;
padding: 0 0 0 2px;
}
.schedMidColLight {
text-align: left;
width: 60.5%;
color: grey;
font-weight: normal;
border-left: 2px solid grey;
padding: 0 0 0 2px;
}
.schedRightCol {
text-align: right;
width: 31.25%;
color: black;
font-weight: bold;
padding: 0 2px 0 0;
}
Why is there so much whitespace around the dates in the leftmost column? One thing I have noticed, if I remove the from Sun. 6/11 (for example) it reduces the whitespace immensely -- but it puts "Sun." and "6/11" on two separate lines, which I do not want. So I need the to remain in there, so it won't split onto two lines, but simultaneously, I need all that excess whitespace to go. (I'd also like to move the text in that leftmost column all the way to the top as well, if you can figure that one out. None of the regular formatting commands work -- assumedly because of the "rotate" business that's causing the whitespace issues.)
Here's my code on JSFiddle.net: sample code on JS Fiddle
Any ideas?
Ok... The answer is apparently, "Don't use -webkit-transform rotate, use writing-mode: vertical-lr."
I changed the
.schedLeftColclass in the CSS file from the example above to the following:Here's the changed JS Fiddle
I still had to use a transform-rotate thingy to make the bottom of the letters point to the right, towards the other text on the table, but that doesn't seem to mess up the sizing of the cells.
Not all the whitespace is gone, but a bunch of it is... I'd really like to remove all the whitespace -- so if someone can figure that out, I'd appreciate it. But I'll keep working on it...
Thanks, L.