- ベストアンサー
リンクがあるとテーブル幅が広がる
cssで table{ width:345px; } としてるのですが、 テーブルの中身にURL（ハイパーリンク）が含まれると そのハイパーリンクの文字の長さを基にテーブルも広がってしまいます。 これを阻止するにはどうすればいいでしょうか？ 手動でリンクのパスを区切るしかないのですか？
- LLQMQRWHCAVQ
- お礼率86% (51/59)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ハイパーリンクは関係なく、英字が改行しないという問題ではないのですか。 table{ width:345px; word-break: break-all; }
関連するQ&A
- テーブルの設幅固定がオフラインで崩れます
WEBサイトでテーブルのセル幅を固定しているのですが、オンライン環境では意図通りになるものの、オフライン環境では固定されずに崩れてしまいます。 固定方法は、外部CSSで「table-layout:fixed;」と「各セルのwidth指定(class)」を記述しています（下記ご参照下さい）。 外部CSSへのリンク指定は絶対パスではなく相対パスで指定しており、オフライン環境でもCSSの参照は出来ていると思います（セル幅以外の記述内容は反映されます）。 どこに原因があるのか分からずに困っています。 お分かりになる方がおられましたら、ご教示頂きたくお願い申し上げます。 【CSS】 table.t { border:1px solid #000000; border-collapse:collapse; table-layout:fixed; font-size:13px; } table.t td{ border:1px solid #000000; height:13px; } table.t th{ border:1px solid #000000; font-size:13px; } .index{ width:155px; } .remarks{ width:100px; } .code{ width:120px; } ・ ・ ・ 【HTML】 <table class="t"> <thead> <tr> <th class="index">INDEX No.</th> <th class="remarks">Remarks</th> <th class="code">Part code</th> ・ ・ ・
- ベストアンサー
- CSS
- CSSを使ってテーブルでセル全体をリンクしたい
CSSを使ってテーブルでセル全体をリンクしたい CSSを使ってテーブルでセル全体をリンクしたい・・・と思っています。 ４つのセル？を横並びにして（２段目は説明書き）、一つ一つ違うところに飛べるようにしたいのですけど、文字だけしかリンクできません。。。 block要素？を使うらしい？ということはわかったのですが、テーブル要素と組み合わせて使う場合どうしたらいいのでしょう？ 色々やってみたのですが、セルが縦並べになってしまったりメインのcolorがなくなってしまったり、形が大幅に崩れたりしてしまいました。 ホームページ作りもＣＳＳも初めてなので、なにをどうしたらよいか教えていただけると嬉しいです ソースをのっけておきます ＜ｃｓｓの方＞ table#table-01 { width: 600px; border: 0px #E3E3E3 solid; border-collapse: separate; border-spacing: 20px 0; } table#table-01 th { width: 130px; height: 70px; padding: 5px; border: #E3E3E3 solid; border-width: 1px 0 0 1px; background: #F5F5F5; font-weight: bold; line-height: 120%; text-align: center; } table#table-01 td { vertical-align: top; padding: 1px 3px 20px 0; border: 0px #E3E3E3 solid; border-width: 0; text-align: center; } ＜ｈｔｍｌの方＞ <table id="table-01" cellspacing="20px"> <tr><th>●●●●</th><th>▲▲▲</th><th>■■■</th><th>○○○</th></tr> <tr><td>●の説明</td><td>▲の説明</td><td>■の説明</td><td>○の説明</td></tr> よろしくお願いします
- ベストアンサー
- HTML
- HTML、CSSについて。テーブル背景がズレる。
こんにちは。よろしくお願いします。 HTMLとCSS、2つのファイルを作成しています。 HTMLでテーブルを作成し、<td><div=名前></div></td> として、テーブルの中身はCSSにまかせています。 複数列、複数行ありますがdiv名はひとつずつ違うのが付いています。 CSSでは、 div#名前 { width: 20px; height: 20px; margin: 0px; padding: 0px; background: url(画像名.gif); } ・ ・ ・ htmlを表示させてはcssのpxを調節し、 きれいな背景画像付きのテーブルが完成した！と思ったのですが、 ブラウザの文字サイズを最大に変更すると崩れてしまいました。 pxではなくて%で指定してみても崩れます。 解決策をご存知の方、教えてくださると有難いです。 よろしくお願いします。
- 締切済み
- HTML
- セル内のリンク文字を中央に配置したい
セル内のリンク文字を中央に配置したい テーブルタグにdisplay:blockを使ってセル全体がリンクできるようにしたのですが、セル内の文字数が増えると(８文字以上になると？)２行になる分、高さが２倍になってしまい、セル内の文字も上下に大きく離れてしまいます。 文字数が２行になる場合でもセルの中央にリンク文字を配置し、高さも２倍にならないようにするにはどうしたらいいか教えてください 全体のwidthを600px, tableを横に４つ並べて一つ一つのtableの大きさを width: 130px; height: 70px; table同士の隙間をあけたかったのでborder-spacing: 20px;とってあります th a{width: 130px; line-height: 70px; display:block;} も入れてあります cssもホームページ作りも慣れていないのでうまく説明できていないかもしれませんが、よろしくお願いします。
- ベストアンサー
- HTML
- CSSでテーブルを作成
CSSでホームページをデザインするときに、 □□ の形の箱二つを作るときに テーブルだと、 width=200px width=100% で右側の□はブラウザのサイズに合わせて調整してくれます。 しかしCSSで書く場合、 width=200px width=100% にしてしまうと、 □ □ のようになってしまいます。 CSSで width=200px width=100% のテーブル風を構築したいのですが、 可能でしょうか？
- ベストアンサー
- その他（プログラミング・開発）
- tableの幅が指定幅になりません
外部ＣＳＳを使用して、下のようにtableの幅指定をしているのですが、幅が指定どおりのサイズになりません。windowsXPのIE7で確認しています。 ●ＨＴＭＬソース---------------------------- <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>***</title> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> </head> <body class="otoiawase"> <div id="main"> <div class="recipie_space_large"> <table> <tr> <td rowspan="2" class="flow_ph"><img src="image/1.jpg" width="140" height="94" /><br /><img src="image2" alt="next" width="140" height="50" /></td> <th><img src="image3.gif" alt="" width="27" height="27" /><b>text</b></th> <td class="freespace" rowspan="2"></td></tr> <tr> <td>comment</td> </tr> </table> </div> </div> </body> </html> ●ＣＳＳソース（外部）---------------------------- *{ margin: 0; padding: 0; } #main .recipie_space_large{ width:730px; } #main .recipie_space_large table{ width:730px; } #main .recipie_space_large table{ border:1px solid #000000; } #main .recipie_space_large table th{ height: 27px; border:1px solid #000000; } #main .recipie_space_large td{ border:1px solid #000000; } #main .freespace{ width:80px; } #main .flow_ph{ width: 150px; } --------------------------------------------- http://www5a.biglobe.ne.jp/~satomi-h/test.html 表示結果↑ 画像が切れていますが、同じ現象です。 textと書いてある部分のセルの幅の高さを27pxにしているのですが、とても大きくなります。class指定にするなどしてみましたが、どれもこのサイズになってしまいます・・・ また、tdにボーダーの指定をしていますが、一番右側のclass="freespace"のセルにボーダーが表示されません。ＣＳＳの表記の仕方が悪いのでしょうか？わかる方がいらっしゃいましたらよろしくお願いします。
- ベストアンサー
- HTML
- cssで、1行2段のtableを記述するには？
cssで、1行2段のtableを記述するには？ → htmlのページに以下を挿入しました。 <table> <tr> <td width="2"></td> <td width="588"></td> </tr> </table> → htmlのページの<head>と</head>の間に以下を挿入しました。 <link rel="stylesheet" type="text/css" href="table.css"> → table.cssファイルを、onimotsuさんの指示に従い、以下のように記述しました。 TABLE{width : 640px;border-width : 0px 0px 0px 0px; padding-top : 0px;padding-left : 0px;padding-right : 0px; padding-bottom : 0px; background-color : #FFFFFF;} → table.cssファイルに以下を挿入するにはどうしたらいいのでしょうか？ いろいろ試しましたが、うまくいきません。 <tr> <td width="2"></td> <td width="588"></td> </tr> → うまく挿入できれば、htmlのページのtableの項は次のようにすっきりとなります。 <table> </table> よろしくおねがいします。
- ベストアンサー
- その他（プログラミング・開発）
- リンク aタグ
リンク<a href="">リンク先のタイトル</a> リンク先のタイトルの長さ（width）を制限（300pxなど）したいのですが、 CSS、javascript(jQuery)などで実現できますでしょうか？ lengthですと、文字によって、widthが大きく変わってしまい困っています。 よろしくお願いします。
- ベストアンサー
- JavaScript
- CSSでテーブルの表示
.table1 { border: 0px #000000 solid; } table1.s1{width: 20px; } table1.s2{width: 40px; } とcssを記述し <TABLE CLASS="table1" CLASS="s1"> ・・・ と行ってもs1,s2の項目が反映されません。 どのようにすればよいでしょうか？
- ベストアンサー
- HTML
- 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
お礼
ありがとうございました。