write vertically in table rows

Question

I want to write vertically in HTML table.In the last column, I want to the text "time table" to be displayed vertically. It should cover all the rows. Something like this:

L

U

N

C

H

How to do this ? Here is the table i want to create.

<table style = "border-collapse: collapse" border = "1px"> <thead> <tr> <th colspan="6" align="center"> Time Table </th> </tr> <tr> <th>DAY/TIME</th> <th>8-9</th> <th>9-10</th> <th>10-11</th> <th>11-12</th> <th rowspan = "6" style="verticle-align: buttom">Lunch Break</th> </tr> <tr> <th>Mon</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Tue</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Wed</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Thu</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Fri</th> <td></td> <td></td> <td></td> <td></td> </tr> </thead> </table>

possible duplicate stackoverflow.com/questions/1080792/…

intelis
– intelis

2013-01-11 05:23:41 +00:00
Commented Jan 11, 2013 at 5:23 — intelis
– intelis, Commented Jan 11, 2013 at 5:23

Nitesh Patil · Accepted Answer · 2013-01-11 05:46:25Z

Put your lunch break text inside a div and apply this css

word-wrap: break-word;width:11px;

Have a look at this jsfiddle demo

Community · Accepted Answer · 2017-05-23 12:12:34Z

Add an id (or class) to the th you want vertical text in, and then you can add the following jQuery function - adds a line break after each character:

$(function() { var html=$('#verticalText').html(); var newHtml=''; for (var i=0;i<html.length;i++) { newHtml=newHtml+html[i]; newHtml=newHtml+'<br/>'; } $('#verticalText').html(newHtml); });

http://jsfiddle.net/K3Ab2/

(modified from Naor's answer to: Add line breaks after n numbers of letters in long words)

عثمان غني · Accepted Answer · 2013-01-11 05:39:11Z

Use following HTML code

<table id="MyTable" style = "border-collapse: collapse" border = "1px">

Time Table

<tr> <th>DAY/TIME</th> <th>8-9</th> <th>9-10</th> <th>10-11</th> <th>11-12</th> <th rowspan = "6" id="vertical" style="verticle-align: buttom">Lunch Break</th> </tr> <tr> <th>Mon</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Tue</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Wed</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Thu</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Fri</th> <td></td> <td></td> <td></td> <td></td> </tr>

Use Following CSS

table#MyTable tr th#vertical { width: 1.2em; white-space: nowrap; color: #000; /*Firefox*/ -moz-transform: rotate(-90deg); /*Safari*/ -webkit-transform: rotate(-90deg); /*Opera*/ -o-transform: rotate(-90deg); /*IE*/ writing-mode: tb-rl; filter: flipv fliph; border:1px black solid; }

See this link

Collectives™ on Stack Overflow

write vertically in table rows

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related