

はじめまして。
cssから初めて、いま初めてテーブルタグを触っているのですが・・・
おそらくとても初心者なことだと思うのですが、tableタグの枠線の太さを揃える方法がわかりません・・・
<table ~>で直接HTMLで指定すると重なり合う2つのborderのおかげで2px分のテーブルが表示されます。
これを1px分だけの細い(ここのサイトもそうだと思います。)テーブルを作りたいのですが、こちらはCSSでそれぞれのセルに対してこのセルはbottomだけ、このセルはleftだけ、というように指定していかなければいけないのでしょうか?
テーブル自体ほとんど触ったことはないのですが、なぜか余計にややこしいことをしているような気がして質問させていただきました。
どうかよろしくお願致します。
No.1ベストアンサー
- 回答日時:
こんな感じでやります
<style>
.border1px{
border-collapse:collapse;
}
.border1px td{
border:1px solid #000000;
}
</style>
<table class="border1px">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
No.2
- 回答日時:
罫線の設定をせずに、罫線を表示させる方法もありますよ。
cellspacingの数字を増やすと罫線が太くなります。
<style type="text/css">
table {
background-color:#646464;
}
th {
font-weight:bold;
background-color:#cacaca;
padding:5px;
}
td {
background-color:#ffffff;
padding:5px;
}
</style>
<table border="0" cellspacing="1" cellpadding="0" summary="ダミーテキスト"><tr>
<th> </th>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<th>A</th>
<td>ダミーテキスト</td>
<td>ダミーテキスト</td>
<td>ダミーテキスト</td>
</tr>
<tr>
<th>B</th>
<td>ダミーテキスト</td>
<td>ダミーテキスト</td>
<td>ダミーテキスト</td>
</tr>
</table>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- MySQL PHPとMySQLを使った掲示板の作り方 1 2022/06/02 13:00
- Access(アクセス) AccessVBAで降順にするテーブル作成クエリを使用して作成したテーブルを削除し同一のテーブル作成 1 2023/01/06 11:17
- Access(アクセス) Accessテーブルの結合で別々のテーブルのフィールドを組み合わせて値を出す方法について 2 2022/07/20 19:43
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- MySQL 【MySQL】本当に困っています。詳しい方、ご教授よろしくお願いします。 1 2023/06/03 14:18
- SQL Server DBのテーブルの設計ができず困っています。 2 2023/06/29 16:43
- その他(Microsoft Office) excel テーブル 4 2023/03/18 16:11
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
テーブルのセルに画像をピッタ...
-
TRタグの余白をcssで設定するには
-
TRとTDに対するCSS設定方法を教...
-
画像の高さと文字位置
-
中に<table></table>が使えるア...
-
テーブル内でdivを使った時に改...
-
表の1列だけをCSSを使って右揃...
-
テーブルタグの中にdivを含めて...
-
テーブルとテーブルの間隔について
-
HTMLでテーブルを横に並べる方法
-
XHTMLに関する質問 順序が逆に...
-
添付のような形で10×10ピクセル...
-
IE7でinputタグのtextがはみ出る
-
<img>タグにCSSのclass設定可能?
-
HTML tableのセルにtextareaを...
-
テーブル内のセル間にスペース...
-
divで囲んだ文字が消える
-
tableタグとformタグの組み合わせ
-
HTML5で、テーブル内tdタグの高...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
TRタグの余白をcssで設定するには
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
テーブルのセルに画像をピッタ...
-
cssで、表示されるテキストによ...
-
中に<table></table>が使えるア...
-
ホームページ 表の上の余白を...
-
tableの要素(tr、td)に一...
-
tableでcolspanを使うと次行以...
-
テーブルの表示がずれます
-
文字列が入っているtdを削除せ...
-
逆L字の表(table)組み
-
テーブルのヘッダとボディの幅...
-
CSSだけで<table>の<td>や<tr>...
-
EXCELからhtmlへの変換で罫線が...
-
tdなどの閉じタグは省略しても...
-
テーブルタグのセルの幅の一部...
-
HTMLのテーブルで桁をそろ...
-
不要な余白を削除する方法を教...
おすすめ情報