aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。
<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>
:
:
<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>
:
:
</tr>
</table>
aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。
よろしくお願いします。
No.1
- 回答日時:
こんにちは。
display:none;
を指定してはいかがでしょうか。
No.2ベストアンサー
- 回答日時:
<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>
<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>
<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>
<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>
だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}
table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}
table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}
table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}
消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;
セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- 英語 提示文の表現の可否について 2 2022/08/17 22:03
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
テーブルの任意の列を非表示にしたい
HTML・CSS
-
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
チェックボックス付きのテーブルから、チェックの付いた行のみの値を取得したい
JavaScript
-
-
4
一覧から選択した行の行番号を取得について
JavaScript
-
5
クリックされたセルの位置を取得するには?
JavaScript
-
6
テーブル列の表示・非表示機能の追加
JavaScript
-
7
yyyymmddからyyyy/mm/ddへの変換
Java
-
8
CSVファイルの中で、「 , 」カンマを使いたい
その他(コンピューター・テクノロジー)
-
9
ORA-01013のエラーについて経験のある方お願いします。
Oracle
-
10
jspからServletを呼び、元のjspページに戻るにはどうしたらよいですか?
Java
-
11
HTML5で、テーブル内tdタグの高さを常に固定に
HTML・CSS
-
12
テーブルセル余白(例えば左側だけ、上側だけ、など)
HTML・CSS
-
13
Java-jspの画面入力値保持について
Java
-
14
HTMLでDBからデータを表形式で表示するには?
HTML・CSS
-
15
JavaScriptの「.querySelectorAll」が効かない?
JavaScript
-
16
tableタグとformタグの組み合わせ
HTML・CSS
-
17
ページ読み込み時に自動的にsubmitさせる方法
JavaScript
-
18
count(*)で取得した値をJAVAの変数に代入するには?
Java
-
19
Excelで"で囲む方法
Excel(エクセル)
-
20
JSPのIF文を教えて下さい
Java
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
テーブルのセルに画像をピッタ...
-
テーブルの装飾
-
HTMLのテーブルで桁をそろ...
-
テーブルの行の高さを指定する...
-
divの中にtableを入れています...
-
HTML <td></td>タグ セル内余...
-
CSSだけで<table>の<td>や<tr>...
-
javascriptを使って、指定行以...
-
テーブルタグの中に<ol><li>を...
-
colspanを使うと正しく表示でき...
-
テーブルの行を折りたたみたい...
-
html・cssで日付をキレイに揃え...
-
テーブルの線を立体じゃなく普...
-
cssで、表示されるテキストによ...
-
EXCELのセル内にHTMLタグを含む...
-
テーブルのヘッダとボディの幅...
-
表の中の列の順番を入れ替える...
-
tableでcolspanを使うと次行以...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
TRタグの余白をcssで設定するには
-
文字列が入っているtdを削除せ...
-
テーブルのヘッダとボディの幅...
-
テーブルの行の高さを指定する...
-
cssで、表示されるテキストによ...
-
テーブルのセルに画像をピッタ...
-
HTML <td></td>タグ セル内余...
-
ホームページ 表の上の余白を...
-
テーブルの表示がずれます
-
スタイルシートで colspan=3と...
-
テーブルの上に空行が入る・・...
-
テーブルタグのセルの幅の一部...
-
表の1列だけをCSSを使って右揃...
-
逆L字の表(table)組み
-
tableでcolspanを使うと次行以...
-
HTMLのテーブルで桁をそろ...
-
テーブルのセルにアンカー
おすすめ情報