1

HTMLの表で縦書きしたいのですが、最後の欄に「時刻表」という文字を縦書きで表示したいです。すべての行をカバーする必要があります。このようなもの：

L

う

N

C

H

これを行う方法 ？これが私が作成したいテーブルです。

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

3 に答える 3

5

昼休みのテキストを div 内に配置し、この css を適用します

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

このjsfiddleデモを見てください

于 2013-01-11T05:46:25.107 に答える
0

次の 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;
}

このリンクを参照してください

于 2013-01-11T05:39:11.307 に答える
0

縦書きテキストを入れたい th に 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の回答から変更：長い単語のn個の文字の後に改行を追加する）

于 2013-01-11T05:32:20.840 に答える