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>
why second column header blank , last column header appearing outside of table?
first parameter of "translate" should 0.
Comments
Post a Comment