質問投稿でgooポイントが当たるキャンペーン実施中!!>>

ボーダーを細くしたい

解決済

  • 質問者：ching18
  • 質問日時：
  • 回答数：3件

テーブルなどを作成してボーダー１に設定すると、とても線が太い気がするのですが。
他のサイトなどと見比べても明らかに太く見えます。
ラインを細くするにはどうすればよいのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「ボーダー」に関するQ&A： 浮気のボーダーラインとは？

A 回答 (3件)

No.1ベストアンサー

  • 回答者： asahina02
  • 回答日時：

ボーダーを０にするか


あるいはテーブルを入れ子にして枠線風に見せてはどうでしょう

<table border="0" cellpadding="0">
<tr>
<td bgcolor="#FF0000">
　　<table border="0" cellpadding="5" cellspacing="1">
　　　　<tr bgcolor="#FFFFFF">
　　　　<td>１</td>
　　　　<td>２</td>
　　　　</tr>
　　</table>
</td>
</tr>
</table>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： steel_gray
  • 回答日時：

結果は同じですが、#2さんのスタイルはもう少しシンプルに書けます。



また、背景色と線の色のコントラストを弱める（線の色を灰色にするとか）ことで視覚効果としてさらに細く感じさせる事もできるかもしれません。


<style type="text/css">
<!--
.tblbd{
border-collapse:collapse;/* 隣接するborderを重ねる*/
border:#ccc solid 1px;
}
.tblbd td {border:#ccc solid 1px;}
//-->
</style>
<table class="tblbd">
<tr><td>セル１－１</td><td>セル１－２</td><td>セル１－３</td></tr>
<tr><td>セル２－１</td><td>セル２－２</td><td>セル２－３</td></tr>
<tr><td>セル３－１</td><td>セル３－２</td><td>セル３－３</td></tr>
</table>

参考URL：http://www.htmq.com/style/border-collapse.shtml
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： Chronos198
  • 回答日時：

<TABLE>タグのBorderは1、CellSpacingを0にすると少し細く見えます。



それ以上に細くする場合、スタイルシートを使うしかありません。
例)
<style><!--
.tblbd{border-color:#000000;border-style:solid;border-width:1px 0px 0px 1px;}
.tdbd {border-color:#000000;border-style:solid;border-width:0px 1px 1px 0px;}
//-->
</style>
<table border="0" cellspacing="0" class="tblbd">
<tr><td class="tdbd">セル１－１</td><td class="tdbd">セル１－２</td><td class="tdbd">セル１－３</td></tr>
<tr><td class="tdbd">セル２－１</td><td class="tdbd">セル２－２</td><td class="tdbd">セル２－３</td></tr>
<tr><td class="tdbd">セル３－１</td><td class="tdbd">セル３－２</td><td class="tdbd">セル３－３</td></tr>
</table>
    • good
    • 0
    • 件
通報する

このQ&Aに関連する人気のQ&A

「ボーダー」に関するQ&A： 子供が、知的障害のボーダーラインと言われました

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q線が一番細いテーブル

テーブルタグありますよね？

あれで、テーブルの線を一番細くしたいんですが、どうすればいいんでしょう？

Aベストアンサー

その他、<table>を２重にして細い線を出す場合もあります。

<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td bgcolor=#909090>
<table border=0 cellpadding=5 cellspacing=1>
<tr>
<td bgcolor=#f0f0f0>項目１</td>
<td bgcolor=#ffffff>ああああああ</td>
</tr>
<tr>
<td bgcolor=#f0f0f0>項目２</td>
<td bgcolor=#ffffff>いいいいいい</td>
</tr>
</table>
</td>
</tr>
</table>

他の回答も見る

Qスタイルシートで罫線をもっと細くしたい

IE6.0です、

テーブルの罫線をもっと細くしたいのですが、
border-widthは1pxが一番細いのでしょうか？
この教えてgooくらい細くしたいのですが
他にやり方があれば教えてください。

TABLE {
border-color: #8b4513;
padding: 1px 1px 1px 1px;
margin: 1px 1px 1px 1px;
border-style: solid;
border-width: 1px 1px 1px 1px;
}

宜しくお願いします、

Aベストアンサー

要は教えてgooと同じようなデザインをcssで実現したいのですよね。
THとTDのborder-styleをnoneに変更、TABLEにborder-collapse: collapse;を追加。
これで近くなるのでは。

TABLE {
margin: 0px;
border: 1px solid #8b4513;
border-collapse: collapse;
}

TH {
background-color: #ffa500;
font-size: x-small;
color: black;
font-family:Times New Roman;
padding: 0px;
border-style: none;
}

TD {
height: 20px;
font-size: x-small;
color: black;
font-family:Times New Roman;
padding: 0px;
border-style: none;
}

他の回答も見る

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか？
<TD>タグや<TR>タグのところでいじくるのですか？

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
＃2の方法ですね。

テーブルごとやセル（<TD>）ごとにサイズを変更するには
スタイルシート（CSS）を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル（<TD>）ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

＃1の方法だとページ内の全てのセル（<TD>）に設定することになります。

スタイルシート（CSS）はこれら以外にも
いろいろな設定方法があります。

他の回答も見る

QIE6からHTML罫線ができるだけ細く印刷されるようCSSで指定したい

HTMLファイルをIE6で表示してIE6で印刷する際、テーブルの罫線の
太さを、できるだけ細く刷られるようにする単位はありませんか。

例えば、CSSで　border: solid 1px #000000;
のようにし、
「1px」を「0.2cm」や「0.1cm」にしてもまったく変化ありません
でした。

プリンタドライバにも依存するのかもしれませんが、何かよい方法が
ありましたらご教示ください。

Aベストアンサー

小数点はおおむね有効です。実際の画面やプリンタでどのような値に計算されるかの保障はありませんが 0.01pt とか にしてみてはどうでしょうか？

http://oshiete1.goo.ne.jp/kotaeru.php3?q=1947216
あと、こちらも参考に。

他の回答も見る

Qテーブルとテーブルの間隔について

同じサイズのテーブル縦にいくつか並べているのですが、今現在は全く隙間無くくっついています。

これを少しだけ（改行タグ<br>の半分以）間隔を空けたいのですが、どうすれば良いのでしょうか？

Aベストアンサー

一番シンプルな方法としては
<table>タグを<table style="margin-bottom:○○px">と書き直します。

他の回答も見る

Q

教えていただけますか？
<input type="text" readonly/>を表示したときに表示される枠を
消すことができますか？
何故？と聞かれたら困りますが。。。
よろしくお願いします。

Aベストアンサー

inputにstyle=border:none;を付けると枠線消えましたよ
（Firefox、IE7では確認出来ました）

他の回答も見る

Qtableにul,または,olを入れられますか？

<table>
　<tbody>
　　<th>くだもの</th>
　　　<td><ul><li>りんご</li><li>みかん</li><li>すいか</li></td>
　　　…etcとして
くだもの
・りんご
・みかん
・すいか
としたいのですが、
<table>の<tbody>の<td>の中に<ul>の<li>を入れる方法は
HTMLの仕様に反していますでしょうか？

Aベストアンサー

きちんとネストされていれば構いません。
ただ、書かれた例だと
・テーブルを構成する<THEAD>, <TR>タグが無い
・<UL>が閉じていない
というエラーがあるので、それを直せばいいでしょう。

<table>
　<thead>
　　<tr><th>くだもの</th></tr>
　</thead>
　<tbody>
　　　<tr><td><ul><li>りんご</li><li>みかん</li><li>すいか</li></ul></td></tr>
　　　：
　　　：
　</tbody>
</table>

他の回答も見る

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか？
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

２列のテーブルを作ったらいかがでしょうか？
<table>
<tr>
<td>１つめのテーブルに入れる内容</td>
<td>２つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば２つ並びます。
<table>
<tr>
<td><table>←１つめのテーブル→</table></td>
<td><table>←２つめのテーブル→</table></td>
</tr>
</table>

他の回答も見る

Qテーブル内の一部のみ線を変更する方法ってありますか？

いつもお世話になっております。どなたか教えて下さい。
無理なら無理で結構ですので不可能だと回答下さい。

あるテーブル内の一部のみ線を点線にしたり、線幅を細くする方法があれば教えてほしいのですが・・・可能でしょうか？

イメージはエクセルのように一部の罫線だけを変更したいのです。宜しく御願いします。

１つのテーブルで実現不能ならば、複数のテーブルを自由に結合する方法とかないでしょうか？

むちゃくちゃ言って申し訳ありませんが、どなたか救いの手をお願いします。

ちなみにブラウザはIE5.0か6.0だと思います。

Aベストアンサー

スタイルシートを用いることで可能です。
以下の例ではタグに直接style属性を埋め込んでいますが、
先にstyle指定をしておくと楽かもしれません。
<table border="1" bordercolor="black">
<tr>
<td style="border-top-style:dashed;border-left:3px solid red;border-bottom-width:2px;border-right-color:blue;">あああ</td>
</tr>
</table>
詳しくは、スタイルシート、CSSなどで調べてみてください。

他の回答も見る

Qプルダウンリストの背景色の指定

お世話になります。
現在作成しているwebページがあり、下記のようにプルダウンリストの背景色を設定しております。
<select>
<option style="background-color: #FF0000;">サンプル1</option>
<option style="background-color: #00FF00;">サンプル2</option>
<option style="background-color: #0000FF;">サンプル3</option>
<option style="background-color: #FFFFFF;">サンプル4</option>
</select>
このページにおきまして、サンプル3を選択したときに、プルダウンリストに「サンプル3」と表示され、背景色が#0000FFになるようにしたいのですが、
上記のままだと、IEでは背景色も変化しますが、firefoxですとプルダウンリスト内に「サンプル3」と表示されても背景色は白のままです。

IEとおなじ動きになるようにするには、どうしたらよいでしょうか。
ちなみに、

<select style="background-color: #FF0000">

にすると、IE、firefoxともにプルダウンリストの背景色が変更できたので、javascriptでoptionのvalueをとり、それをselectのstyleに設定できれば。。。
と考えたのですが、javascriptはほぼ無知なので、上記の方法でも解決できずでした。

簡単に解決できる方法などございますでしょうか。
もしくは、javascriptで解決できますでしょうか。

どうぞ宜しくお願いいたします。

お世話になります。
現在作成しているwebページがあり、下記のようにプルダウンリストの背景色を設定しております。
<select>
<option style="background-color: #FF0000;">サンプル1</option>
<option style="background-color: #00FF00;">サンプル2</option>
<option style="background-color: #0000FF;">サンプル3</option>
<option style="background-color: #FFFFFF;">サンプル4</option>
</select>
このページにおきまして、サンプル3を選択したときに、プルダウンリストに「サンプル3」と表示され...続きを読む

Aベストアンサー

「スタイルシートのクラス名」

<html>
<head>
<title>TAG index Webサイト</title>
<script type="text/javascript">
<!--
function chBackGround(e) {
e.className=e.options[e.selectedIndex].className;
document.getElementById('submit').focus();
}

window.onload = function() {
document.getElementById('key').className='color01';
}
// -->
</script>
<style type="text/css">
<!--
.color01 {
background-color: #FF0000;
}

.color02 {
background-color: #00FF00;
}

.color03 {
background-color: #0000FF;
}

.color04 {
background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
<form name="f1" action="./DB.cgi" method="POST">
<div>
<select id="key" name="key" onchange="chBackGround(this)">
<option class="color01">
サンプル1
</option>
<option class="color02">
サンプル2
</option>
<option class="color03">
サンプル3
</option>
<option class="color04">
サンプル4
</option>
</select>
</div>
<input id="submit" type="submit" value="表示">
<input type="hidden" name="mode" value="display">
</form>
</body>
</html>

「スタイルシートのクラス名」

<html>
<head>
<title>TAG index Webサイト</title>
<script type="text/javascript">
<!--
function chBackGround(e) {
e.className=e.options[e.selectedIndex].className;
document.getElementById('submit').focus();
}

window.onload = function() {
document.getElementById('key').className='color01';
}
// -->
</script>
<style type="text/css">
<!--
.color01 {
background-color: #FF0000;
}

.color02 {
background...続きを読む

他の回答も見る
ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報