Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<div id="data">
<table>
  <tr>
    <td colspan="2" rowspan="4" class="instead-of-th"></td>
    <th colspan="31">October</th>
  </tr>
  <tr class="kw-row">
    <td colspan="5" class="fff">KW39</td>
    <td colspan="7" class="fff">KW40</td>
    <td colspan="7" class="fff">KW41</td>
    <td colspan="7" class="fff">KW42</td>
    <td colspan="5" class="fff">KW43</td>
  </tr>
  <tr class="week-names-row">
    <td><div class="rotate">Wednesday</div></td>
    <td>T</td>
    <td>F</td>
    <td>S</td>
    <td>S</td>
    <td>M</td>
    <td>T</td>
    <td><div class="rotate">Wednesday</div></td>
    <td>T</td>
    <td>F</td>
    <td>S</td>
    <td>S</td>
    <td>M</td>
    <td>T</td>
    <td>W</td>
    <td>T</td>
    <td>F</td>
    <td>S</td>
    <td>S</td>
    <td>M</td>
    <td>T</td>
    <td>W</td>
    <td>T</td>
    <td>F</td>
    <td>S</td>
    <td>S</td>
    <td>M</td>
    <td>T</td>
    <td>W</td>
    <td>T</td>
    <td>F</td>
  </tr>
  <tr class="dates-row">
    <td class="fff">01</td>
    <td class="fff">02</td>
    <td class="fff">03</td>
    <td class="fff">04</td>
    <td class="fff">05</td>
    <td class="fff">06</td>
    <td class="fff">07</td>
    <td class="fff">08</td>
    <td class="fff">09</td>
    <td class="fff">10</td>
    <td class="fff">11</td>
    <td class="fff">12</td>
    <td class="fff">13</td>
    <td class="fff">14</td>
    <td class="fff">15</td>
    <td class="fff">16</td>
    <td class="fff">17</td>
    <td class="fff">18</td>
    <td class="fff">19</td>
    <td class="fff">20</td>
    <td class="fff">21</td>
    <td class="fff">22</td>
    <td class="fff">23</td>
    <td class="fff">24</td>
    <td class="fff">25</td>
    <td class="fff">26</td>
    <td class="fff">27</td>
    <td class="fff">28</td>
    <td class="fff">29</td>
    <td class="fff">30</td>
    <td class="fff">31</td>
  </tr>
  <tr>
    <td class="project-cell">Project 1000<br></td>
    <td class="icon-cell">icon</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
  </tr>
  <tr>
    <td class="project-cell">Project 1001<br></td>
    <td class="icon-cell">icon</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
  </tr>
  <tr>
    <td class="name-cell indent">Miller</td>
    <td class="icon-cell">icon</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
  </tr>
  <tr>
    <td class="name-cell indent">Black</td>
    <td class="icon-cell">icon</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
  </tr>
  <tr>
    <td class="name-cell indent">White</td>
    <td class="icon-cell">icon</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
  </tr>
  <tr>
    <td class="name-cell indent">Green</td>
    <td class="icon-cell">icon</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="grayzed-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
    <td class="orangized-gradient">&nbsp;</td>
  </tr>

  <tr>
    <td colspan="33" class="break-row"></td>
  </tr>
  <tr>
    <td class="project-cell2">Project 1000<br></td>
    <td class="icon-cell">icon</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
  </tr>
  <tr>
    <td class="project-cell2">Project 1001<br></td>
    <td class="icon-cell">icon</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
  </tr>
  <tr>
    <td class="name-cell2">Miller</td>
    <td class="icon-cell">icon</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
  </tr>
  <tr>
    <td class="name-cell2">Black</td>
    <td class="icon-cell">icon</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
  </tr>


  <tr>
    <td class="name-cell2">White</td>
    <td class="icon-cell">icon</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
  </tr>


  <tr>
    <td class="name-cell2">Green</td>
    <td class="icon-cell">icon</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="grayzed-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
    <td class="orangized-gradient2">&nbsp;</td>
  </tr>

  <tr>
    <td colspan="33" class="break-row"></td>
  </tr>


</table>
</div>


              
            
!

CSS

              
                

body {
background-color:#000;
color:#fff;
}

  #data table, #data th, #data td {
    padding:4px;
		font-family:Arial; font-size:11pt;
    word-break:normal;
		overflow:hidden;
    	 }
      #data table {
				margin:auto;
				border-collapse:collapse;
      	table-layout:fixed;
      	 }
      #data th {
      	font-size:15pt; word-spacing:30px;
				background-color:#131313;
				border:#131313 1px solid;
      	 }
      #data td {
				border:#000 1px solid;
 				color:#000; text-align:center; 
				 }
			#data .kw-row {
				background-color:#2B2B2B;
				 }
/* rows here */
			#data .dates-row {
			  padding:2px;
				background-color:#2B2B2B;
				 }
			#data .project-cell {
			  background-color:#9D6100;
				 }
			#data .name-cell {
			  background-color:#CD7F00;
				border-style:solid;
				 }
			#data .icon-cell {
			  background-color:#FFD143;
				 }
			#data .orangized-gradient {
			  background:linear-gradient(#CF6714, #CF8A52);
				color:#101010;
				 }
			#data .orangized-gradient:hover {
			  background:linear-gradient(#B63B05, #B65F29);
				color:#fff;
				 }
			#data .grayzed-gradient {
			  background:linear-gradient(#1E2123, #313538);
				color:#FFA943;
				 }
			#data .grayzed-gradient:hover {
			  background:linear-gradient(#000000, #17191B);
				color:#fff;
				 }
			#data .break-row {
			  background:linear-gradient(#313538, #1E2123);
				color:#fff; padding:10px;
				 }
			#data .indent {
			  border-left-width:100px;
				 }
			#data .instead-of-th {
			  border-top-left-radius:2em;
				background-color:#131313;
				color:#fff; border:0px;
				 }
			#data .fff { /* fff = white color */
				color:#fff;
				 }



			#data .project-cell2 {
			  background-color:#4F4F4F;
				color:#fff;
				 }
			#data .name-cell2 {
			  background-color:#878787;
				color:#fff;
				 }
			#data .orangized-gradient2 {
			  background:linear-gradient(#6E6E6E, #8D8D8D);
				color:#101010;
				 }
			#data .orangized-gradient2:hover {
			  background:linear-gradient(#8D8D8D, #6E6E6E);
				color:#fff;
				 }
			#data .grayzed-gradient2 {
			  background:linear-gradient(#CACACA, #DEDEDE);
				 }
			#data .grayzed-gradient2:hover {
			  background:linear-gradient(#DEDEDE, #CACACA);
				color:#5B5B5B;
				 }




			#data .week-names-row {
				background-color:#FFD143;
				 }

/*#data #rotator-hoster {
		width:auto; margin:0px auto; padding:0px;
		transform:rotate(-90deg);
		background:red url("sample_day.png") no-repeat 50% 50%;
		}*/
.week-names-row td {
  width: 1.4em; max-width: 1.4em;
  height: 90px;
				 }
.rotate{
		transform:rotate(-90deg);
		-ms-transform:rotate(-90deg); /* IE 9 */
		-webkit-transform:rotate(-90deg); /* Chrome, Safari, Opera */
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  height: 1.5em;
  position: relative; 
  bottom: -50%;
}


              
            
!

JS

              
                
              
            
!
999px

Console