- ベストアンサー
列の幅をcssで指定するには？
outbraveの回答
td { width: 2em;} td:first-child { width: 1em; } 最初の要素を指定する。 または td { width: 1em;} td + td { width: 2em; } 直後の要素を指定する。 などで可能です。
関連するQ&A
- cssで列の幅を調整するには？
たとえば、 <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> このようなcssとコードがある場合、 3列目のｃと３の列の幅を10％にしたい場合、 どのようなコードを書けばいいですか？ td { width: 10%; } こうすると、すべての列が１０％になってしまいます。 指定した列のみのcssで幅を調整する方法を教えてください。 できれば直接テーブルのタグをいじるのではなく、スタイルシートの宣言部分で対応したいです。
- ベストアンサー
- HTML
- ２列目のみcssを適用させるには？
<html> <head> <title>test</title> <style type="text/css"> table.test td+td { padding-left:1em; } </style> </head> <body> <table class="test" border=1> <tr><th>No</th><th>タイトル(この列だけ左からの距離を指定する)</th><th>その他</th></tr> <tr><td>1</td><td>bbb</td><td>1</td></tr> <tr><td>2</td><td>ccc</td><td>2</td></tr> </table> </body> </html> このソースだと２列目と３列目にcssが適用されてしまいます。 table.test td+td の部分は、okwaveからのコピペで見よう見まねでやってみたのですが どうすれば「２列目だけ」を指定できますか？ このソースでの表示結果は画像の通りです。
- ベストアンサー
- HTML
- テーブルの行の高さを指定する時全てのtdタグに？
スタイルシートでテーブルの行の高さを指定する時は、 全てのtdタグにスタイルシートを指定するべきか、 １つだけ（一番左だけ）指定すればいいのかわからないので押してください。 全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。 コードを書く上でどちらが適切か教えてください。 -------------------------------------------------- <style type="text/css"> td.test {height: 50px;} </style> <body> １の例<br>（2列ともclass="test"を入れた）<br> <table border=1> <tr><td class="test">1</td><td class="test">2</td></tr> <tr><td class="test">3</td><td class="test">4</td></tr> </table> <br><br> ２の例<br>（一番左の列だけclass="test"をいれた）<br> <table border=1> <tr><td class="test">1</td><td>2</td></tr> <tr><td class="test">3</td><td>4</td></tr> </table> <br><br> ３の例<br>（スタイルシートは何も指定していない）<br> <table border=1> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table>
- ベストアンサー
- HTML
- テーブルの幅をデフォルトに戻すcssがわかりま
<html> <head> <title>test</title> <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1> <tr><td>No</td><td>table1</td></tr> </table> <table border=1> <tr><td>No</td><td>table2</td></tr> </table> </body> </html> このようなソースで二つ目のテーブルだけ table { width: 100%; } を適用しない方法はありますか? 実際はテーブルが複数あり 基本的には table { width: 100%; } をテーブルに設定したいのですが とあるテーブルのみテーブルの幅をデフォルトのサイズにしたいのです。 table { width: 100%; } で全てのテーブルに適用した後に クラスを使って該当のテーブルのみ デフォルトの値に戻す方法は有りますか? <table border=1 class="デフォルトに戻す"> <tr><td>No</td><td>table2</td></tr> </table> としたいのですが テーブルの幅をデフォルトに戻すcssがわかりません。 2つのテーブルの幅は指定したくありません。
- ベストアンサー
- HTML
- HTMLのtableタグでセル毎の幅率を指定したい
HTMLにtableタグがあると思いますが、 例えば <table> <tr> <td></td> <td></td> </tr> </table> のように左右にセルがあるだけの単純な表を作ったとします。 この場合１００ピクセルの幅にして左が７０ピクセル、右が３０ピクセルみたいに 個々の列で幅の比率を指定したりはできるのでしょうか？
- ベストアンサー
- HTML
- テーブルの幅の指定・・・
テーブルの幅が変わらないように 幅を指定するようにするにはどうしたらよいでしょうか？ 普通にwidth=100などと打ち込んでいるのですが、 サイズが変化してしまいます。 もうちょっと具体的に言うと、 <table> <tr> <td></td> <td></td> </tr> <tr> <td colspan=2></td> </tr> </table> 上に二つテーブルがあって、 その下に一つのテーブルがある状態です。 この状態で、上の二つのテーブルの右側の方には画像を入れて、 幅と高さを指定したいと思っています。 その下には、文を打ち込む予定です。 この画像のところを変化しないように指定したいのです。 画像が何重にも写らないようにしたいからです。 文をたくさん打ち込むとそれだけテーブルが大きくなりますよね。 そのときに上の二つのテーブルのところの 画像が入っていない左のほうのテーブルの長さを変化させたいのです。 どうすればいいでしょうか？ よろしくおねがいします。
- ベストアンサー
- HTML
- TABLEタグの幅指定
テーブルの幅を厳密に指定したいのですが、 例えば以下のような１行２列のテーブルがあるとき、 <TABLE CELLSPACING=1 CELLPADDING=4 BORDER=0> <TR> <TD WIDTH=100>***</TD> <TD WIDTH=100>***</TD> </TR> </TABLE> このような場合にテーブルタグにWIDTH属性を加えるとすると、 100*2+4*4+1*3=219で、WIDTH=219が正確な値なのでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- セル結合時のcols指定について
tableタグでcols（列数）を指定すると表示が若干早くなる、ということを聞いたので、実践してみたいのですが、不規則なセルの結合をしている場合、列数の指定は、どこに揃えれば良いのでしょうか？ 例) <table cols="?"> <tr> <td colspan="6">左</td> <td>右</td> </tr> <tr> <td colspan="3">左1/2</td> <td colspan="3">左2/2</td> <td>右</td> </tr> <tr> <td colspan="2">左1/3</td> <td colspan="2">左2/3</td> <td colspan="2">左3/3</td> <td>右</td> </tr> </table> 左の列には、上からそれぞれ1,2,3個分のセルを収め、右の列は１個のセルを収める。 例えばこんな形式の表を作ったとして、実質的な列数は上から、2,3,4つになりますが、左右をきっちり分ける為に、colsは7つ分使っています。 この場合だと、colsの合計値である「7」に合わせるのが適切なのでしょうか？ それとも見た目の列数の最大値「4」に合わせるべきなのでしょうか。 表示速度の効果自体は大したものではないかもしれませんが、 ちょっと気になったので質問します。
- ベストアンサー
- HTML
- css で指定した div と table の幅が
html と css の勉強中です。 スタイルシートで次のように同じ幅を 指定したのですが、表とブロックの幅が 揃いません。 <style><!-- #a {width:300px;border:solid 2px} #b {width:300px;border:solid 2px} --></style> <div id="a"> <p> a b c d </p> </div> <table id="b" border="1"> <tr> <td>a</td><td>b</td><td>c</td><td>d</td> </tr> </table> ブラウザは IE６と opera で見てみました。 お願いします。
- ベストアンサー
- CSS
- 複数テーブルの幅指定？
こんばんは。こちらでのカテゴリでは初めての投函になります。 以下の件に関して、悩んでおりますが、対処法などご存知の方がいらっしゃいましたら、 ご指導いただければと思います。宜しくお願い致します！ <table align="left" width="50%"> <tr><td>あああ</td></tr> </table> のようなテーブルが10個あるとき、プログラムで2列表示に変更（widthの値はプログラムで変動） したり3列表示に変更したりしたいのですが、上記に示したテーブルの設定はそのままにした場合、 自動で改行？させる方法はあるのでしょうか？ 当たり前なのでしょうが、上記テーブルをそのまま10個並べると、 +-------+ +-------+ +-------+ +-------+ +-------+ +-------+ | あああ | | あああ | | あああ | | あああ | | あああ | | あああ | ・・・ +-------+ +-------+ +-------+ +-------+ +-------+ +-------+ のように、右に続いてしまいます。テーブルの指定でも構いませんし、CSSの設定でも構いません。 対処法があればアドバイスいただけないでしょうか？宜しくお願い致します！
- ベストアンサー
- CSS
お礼
ありがとうございました。