在表格行中垂直寫入

我想在HTML表格中垂直寫入。在最後一列中，我想要垂直顯示文本「時間表」。它應該覆蓋所有行。事情是這樣的：在表格行中垂直寫入

大號

如何做到這一點？這是我想要創建的表格。

<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>

來源

2013-01-11 user1263375

可能重複http://stackoverflow.com/questions/1080792/how-to-繪製垂直文本與 - CSS-跨瀏覽器 – intelis

把你的午休文字的div內，應用此CSS

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

看一看這個jsfiddle demo

來源

2013-01-11 05:46:25

一個ID（或類）添加到日要在垂直文本，然後你可以添加以下jQuery函數 - 將每個字符後是一個換行符：

$(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/

（從NAOR的回答修改爲：Add line breaks after n numbers of letters in long words）

來源

2013-01-11 05:32:20

使用下面的HTML代碼

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

時間表

<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>

使用下面的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

來源

2013-01-11 05:39:11

在表格行中垂直寫入

回答

相關問題