• 締切済み

テーブルの中の文字を縦に表示する方法

テーブルの中の文字を縦に表示する方法はありますか？ 今はわからないので、<br>で無理やり改行しています。 もっとスマートな方法があれば教えてください。 <style type="text/css"> table { width: 50%; height: 20px; border: 2px #2b2b2b solid; } td { border: 2px #2b2b2b solid; } </style> <table> <tr> <td>よこ</td> <td>た<br>て</td> </tr> </table>

  • CSS
  • 回答数1
  • ありがとう数7

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

単純にそのセルの幅を一文字とか入らないようにすればよいだけです。 下記にサンプル上げておきます。 ※なお、文書の整形のためにtableは使用してはなりません。スタイルシートを使用しましょう。 『単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )』 　table使わないほうが、はるかに楽ですし。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　のDATA入力でチェック済みのHTML4.01strict+CSS2.1 ★印刷時には適用されません。 　印刷プレビューで確認 ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} /* 色分け */ body{background-color:gray;} div.header{background-color:aqua;} div.section{background-color:white;} div.footer{background-color:fuchsia;} table[summary="都道府県"]{ width: 50%; margin:0 auto; border-collapse:collapse; } table[summary="都道府県"],table[summary="都道府県"] th,table[summary="都道府県"] td{ border: 2px #2b2b2b solid; } table[summary="都道府県"] th,table[summary="都道府県"] td{ padding:0.5em; } table[summary="都道府県"] th{ width: 2em; } table[summary="都道府県"] td{ min-width:5em; } table[summary="都道府県"] td+td{ text-indent:1em; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<table summary="都道府県" border="1"> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="北海道">北海道</th> ＿＿＿＿＿<td>北海道</td> ＿＿＿＿＿<td>47都道府県中、唯一の「道」で、道庁所在地は札幌市である。</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th rowspan="6" abbr="東北">東北地方</th> ＿＿＿＿＿<td>青森県</td> ＿＿＿＿＿<td>日本の本州最北端に位置する県である。県庁所在地は青森市。</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>岩手県</td> ＿＿＿＿＿<td>東北地方に属する日本の都道府県の一つ。県庁所在地は盛岡市。</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>宮城県</td> ＿＿＿＿＿<td>東は太平洋に面し、西は奥羽山脈に接する。県庁所在地は仙台市。</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>秋田県</td> ＿＿＿＿＿<td>日本の東北地方の県のひとつで、日本海に面する。県庁所在地は秋田市。</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>山形県</td> ＿＿＿＿＿<td>日本の東北地方南西部の県。日本海に面する。県庁所在地は山形市。</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>福島県</td> ＿＿＿＿＿<td>東北地方の南部に位置する。県庁所在地は福島市。</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2013-03-03 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • CSSのテーブルの件で

    はじめまして よろしくお願いいたします。 CSSでテーブルを作っているのですが うまくいきません 作りたいのは下記のようなテーブルです ┌───────┐ │　A　 │　B 　 │ └───────┘ 点線ではなく普通の線で構いません 大きなテーブルの幅が500pxとして Aを200px Bを300px にしたいのです テーブルのIDは「table2」にしています <外部CSSの部分> #table2{border:1px solid #000000; width:500px; } #table2 th{border:1px solid #000000; width:200px; } #table2 td{border:1px solid #000000; width:300px; } <htmlの部分> <table id="table2"> <tr> <td></td> </tr> </table> 色々やってみたのですが うまく行きません 詳しい方教えて頂けないでしょうか？ どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 特定のテーブルのみ枠線の色を消したい

    スタイルシートで他のテーブルの為に色を設定しているけど 特定のテーブルのみ、枠線の色をすべて消したい場合は、 どうすればよろしいでしょうか？ <style type="text/css"> table {border:1px solid red;} table tr {border:1px solid red;} table th {border:1px solid red;} table td {border:1px solid red;} </style> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=1 cellspacing=1 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=0 cellspacing=0 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> このソースだと、テーブルならすべて枠線が付いてしまいます。 特定のテーブルのみ赤枠ではなく、白にして色を消したいのですがどうすればいいですか？

    • ベストアンサー
    • CSS
  • tableの外枠をCSSで表示させない方法

    HTMLで作ったテーブルの外枠の縦線をCSSで表示させないようにしたいのですが可能でしょうか？ HTMLはさわらずにできる限りCSSでやりたいと思い、いろいろ試してみましたがうまくいきませんでした。 線種はsolidを使いたいです。 よろしくお願いいたします。 <html> <head> <title>css table</title> <style type="text/css"> <!-- table.sample { width:550px; height:auto; border:solid 1px; border-collapse:collapse; border-left:none; border-right:none; } .sample th { width:100px; border:solid 1px; } .sample tr { border:solid 1px; } .sample td { border:solid 1px; } --> </style> </head> <body> <table class="sample" frame="hsides"> <tr> <th scope="row">&nbsp;</th> <td>&nbsp;</td> <td></td> <td></td> </tr> <tr> <th scope="row">&nbsp;</th> <td>&nbsp;</td> <td></td> <td></td> </tr> <tr> <th scope="row">&nbsp;</th> <td>&nbsp;</td> <td></td> <td></td> </tr> <tr> <th scope="row">&nbsp;</th> <td>&nbsp;</td> <td></td> <td></td> </tr> <tr> <th scope="row">&nbsp;</th> <td>&nbsp;</td> <td></td> <td></td> </tr> </table> </body> </html>

    • ベストアンサー
    • CSS
  • tableにtable。table同士の間隔を拡大

    スクロールバーを付けるためにtable内にtableを入れました。 中のtableとtableの間隔を開けたいです。 言葉が少ないですが、その分画像で頑張って説明します。 お願いいたします。 <style type="text/css"> #test0{ cellpadding: 2; width: 518px; background-color : #fff; border:1px solid #333; border-spacing:0; } #start{ width: 495px; height: 230; border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } .center{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } #end{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #40ee22; } td.test1{ background-color: #000000; color: #333333; } td.test2 img{ margin: 10px; } .test3{ font-size: 12px; padding: 5px; } td.test4{ text-align: center; } </style> <table id="test0"> <tbody> <tr> <td> <DIV style="height:400px; overflow:auto;"> <table id="start"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table class="center"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table id="end"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> </div> </td> </tr> </tbody> </table>

    • ベストアンサー
    • HTML
  • テーブルの中にiframe

    テーブルの中にiframeをしているのですが どうしてもボタンが右側に少しはみ出ますし iframeは縦400pxを超えるページを表示すると 縦スクロールバーが表示されますが それも右側にはみ出ます。 どうにか800pxの中に収まらないものでしょうか？ また、ボタンのボーダを下記ソースでは消していますが デフォルトで表示される立体感のあるボタンのまま 800pxの中に収めたいです。 HTML5、CSS2.1です。 ご相談お願いします。 <table> <tr style="width: 800px; height: 50px"> <td><input type="button" value="1"/></td> <td><input type="button" value="2"/></td> <td><input type="button" value="3"/></td> <td><input type="button" value="4"/></td> <td><input type="button" value="5"/></td> </tr> <tr style="width: 800px; height: 400px"> <td colspan="5" style="width: 800px; height: 400px"> <iframe src="hoge.htm"></iframe> </td> </tr> <tr style="width: 800px; height: 50px"> <td colspan="5" style="width: 800px; height: 50px"> <p>hoge</p> </td> </tr> </table> ------------------------------------------------------------ table { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } tr td { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } input { border-style: none; border-width: 0px; padding: 0px; margin: 0px; color: Red; width: 160px; height: 50px; font-size: 20px; font-family: HGS明朝B; background-color: transparent; } iframe { padding: 0px; margin: 0px; border-style: none; border-width: 0px; background-color: transparent; width: 800px; height: 400px; }

    • ベストアンサー
    • HTML
  • テーブルに関する質問です。

    テーブルに関する質問です。 wordpressでHPを作っているのですが、テーブルが思った通りの形にならない為 試しにhtmlドキュメントで同じテーブルを作ろうと試みたのですが やはり同じ現象が起き、思った通りのレイアウトにならないです。 一行目のテーブルと二行目のテーブルはくっつけて、 二行目の列のテーブルのセルとセルの間隔を1px空けてやりたいのですが (1)のwidth:0;の空きセルを作って、それをセルとセルの間に挿入することによって 間隔を空けるという方法は、どうやっても1pxではなく2pxの間隔になってしまい、 (2)の白いborderをセルの右側だけに表示させるという方法では、 Firefoxでは思った通りのレイアウトなのですが、 IE6で見た場合に一行目のセルに線が付きぬけて表示されてしまいます。 色によっては誤魔化かされて付き出てない様に見えるのですが。 どうしたら良いでしょうか？ よろしくお願いします。 (1) <HTML> <HEAD> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } --> </STYLE> </HEAD> <BODY> <table border="0"> <tbody> <td style="background-color:#b7a193; width: 300px; height: 30px; padding:0px" colspan="5"></td> <tr> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> <td style="background-color: #ffffff; width: 0px; height: 40px; border-collapse: collapse;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> <td style="background-color: #ffffff; height: 40px; width: 0px; border-collapse: collapse;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> </tbody> </table> </BODY> </HTML> (2) <HTML> <HEAD> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } --> </STYLE> </HEAD> <BODY> <table border="0"> <tbody> <td style="background-color: b7a193; width: 300px; height: 30px; padding:0px" colspan="3"></td> <tr> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> </tbody> </table> </BODY> </HTML>

    • ベストアンサー
    • CSS
  • サイズ指定したテーブルを縦に並べるとセルがズレる

    色々と試しているんですが解決できないので教えてください。 CSSで全く同じようにサイズ指定しているテーブルを縦に並べた時、同じようにサイズ指定しているはずなのに、IEではセルの内容（テキストの長さ）によってセルの幅が変わってしまいます。具体的に言うと、ショッピングカートの商品ページのようなものを作ろうとしているのですが、以下のようなソースです。 .menu-table{ width:500px; padding:0px; border-collapse:collapse; } .menu-title{ margin:0px; padding:5px; border:1px solid #ff9900; } .menu-img{ width:110px; margin:0px; padding:5px; border:1px solid #ff9900; } .menu-style1{ width:70px; margin:0px; padding:5px; border:1px solid #ff9900; } .menu-style2{ width:300px; margin:0px; padding:5px; } .menu-style3{ margin:0px; padding:5px; } <table width="0" border="0" cellspacing="0" cellpadding="0" class="menu-table"> <tr> <td colspan="3" class="menu-title">商品名</td> </tr> <tr> <td rowspan="4" class="menu-img"><img src="item.jpg" width="100" height="100" /></td> <td class="menu-style1">説明1</td> <td class="menu-style2">あいうえお</td> </tr> <tr> <td class="menu-style1">説明2</td> <td class="menu-style2">かきくけこ</td> </tr> <tr> <td class="menu-style1">価格</td> <td class="menu-style2">\1,000￥</td> </tr> <tr> <td colspan="2" class="menu-style3">あいうえおかきくけこさしすせそたちつてとなにぬねの</td> </tr> </table> こういうテーブルを縦にいくつか並べた時、例えば2つ目のテーブルが「あいうえお」のところに「あいうえおかき」と入力すると、「あいうえお」と入力したテーブルに比べて「説明1」のセル幅が狭くなってしまいます。Firefoxでは綺麗に揃うんですが、どうしてもIEではずれます。ボーダーの幅のぶんも計算に入れて幅を指定し直してもずれるんです。説明が下手すぎてうんざりかもしれませんが、どなたか解決策が分かれば教えてください。

    • 締切済み
    • CSS
  • テーブル（表）の表示について

    ブラウザ（現在わかっているのはIE6、7）によって、表の表示が異なる事に悩んでます。 例えば、 <table cellpadding="5" style="border-collapse:collapse;font-size:12px;color:#000000;background:#B2DFEE;text-align:left;margin:15px 15px 15px 15px ; float: left;"><tbody><tr> <td style="border:1px solid #000000" colspan="5"><div align="center"><b>○○</b></div></td> </tr><tr> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr></tbody></table> のような記述だと、右側の罫線が表示されません。 私はFirefoxを使っていて安心していたのですが、友人に指摘されて困っています。 作成した環境はwin xp MCE 2002 sp3です。 ちなみにSafariではきちんと表示されていました。 どこを直せばいいのかどなたか教えてください。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • テーブルを作ったんですが…

    はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>

  • css テーブルについて

    よろしくお願いします。 2だけを300pxと100pxに2分割にできないでしょうか。 <div class="aa"> <table> <tr> <th>1</th> <td>2</td> </tr> <tr> <th>1</th> <td>1</td> </tr> </table> </div> .aa table { width: 500px; height: 100px; border: 1px #000000 solid; border-collapse: collapse; } .aa th { width: 100px; border: 1px #000000 solid; } .aa td { width: 400px; border: 1px #000000 solid; }

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する