html - Formatting error while rotating header in table -


i working on table in rotate table fit big header names using following code.

<html><body>  <style type="text/css"> .tftable {font-size:12px;color:#333333;width:1%;border-width: 1px;border-color: #ebab3a;border-collapse: collapse;} .tftable th {font-size:12px;border-width:1px;padding: 1px;border-style: solid;border-color: #ebab3a;text-align:left;} .tftable tr { line-height: 14px;} .tftable td {font-size:12px;border-width: 1px;padding: px;border-style: solid;border-color: #ebab3a;height: 14px;} .tftable tr:hover {background-color:#ffffff;border:none;} th.rotate {   /* can count on */   height: 140px;   white-space: nowrap; }  th.rotate > div {   transform:      /* magic numbers */     translate(25px, 51px)     /* 45 360 - 45 */     rotate(270deg);   width: 30px; } th.rotate > div  {   border-bottom: 0px solid #ccc;   padding: 0px 0px; } </style>    <table class="tftable" border="1"> <tr><th class="rotate"><div>metabolite</div></th><th class="rotate"><div>experiment</div></th><th class="rotate"><div>experiment</div></th><th class="rotate"><div>experiment</div></th><th class="rotate"><div>experiment</div></th><th class="rotate"><div>experiment</div></th><th class="rotate"><div>experiment</div></th><th class="rotate"><div>experiment</div></th><th class="rotate"><div>experiment</div></th><th class="rotate"><div>experiment</div></th><th class="rotate"><div>experiment</div></th><th class="rotate"><div>experiment</div></th><th class="rotate"><div>experiment</div></th><th class="rotate"><div>experiment</div></th><th class="rotate"><div>experiment</div></th></tr> <tr><td bgcolor="green">metabolilte1</td><td> 2</td><td> 3</td><td> 4</td><td> 5</td><td> 6</td><td> 7</td><td> 8</td><td> 9</td><td> 10</td><td> 11</td><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr> <tr><td>metabolilte2</td><td> 2</td><td> 3</td><td> 4</td><td> 5</td><td> 6</td><td> 7</td><td> 8</td><td> 9</td><td> 10</td><td> 11</td><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr> <tr><td>metabolilte3</td><td> 2</td><td> 3</td><td> 4</td><td> 5</td><td> 6</td><td> 7</td><td> 8</td><td> 9</td><td> 10</td><td> 11</td><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr> <tr><td>metabolilte4</td><td> 2</td><td> 3</td><td> 4</td><td> 5</td><td> 6</td><td> 7</td><td> 8</td><td> 9</td><td> 10</td><td> 11</td><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr> </table> </body></html> 

enter image description here

why second column header blank , last column header appearing outside of table?

first parameter of "translate" should 0.


Comments

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -

java - Digest auth with Spring Security using javaconfig -