2020年1月9日テーブルタグに線を引くことは、HTMLやCSSで日常的に行う操作になります。今回、テーブルタグを「角丸」にしようと思ったところ、少々はまったため、解決方法を忘備録として記録いたします。これを何とかするためには、tableのスタイルシートに、隙間を無くす記述を入れます。原因は隙間を埋める「collapse」が角丸の邪魔をしていました。一般的なテーブルタグは、以下のようになります。--><table><tr><th>1</th><td>テキスト</td></tr><tr><th>2</th><td>テキスト</td></tr><tr><th>3</th><td>テキスト</td></tr><tr><th>4</th><td>テキスト</td></tr><tr><th>5</th><td>テキスト</td></tr></table>この辺は、そうは難しくありません。CSS(スタイルシート)で枠線を付けます。タグに全体を囲う線を引き、th、tdタグに下線をつけます。最後th、tdタグだけ下線をなしにします。その結果できたものがこちらです。微妙に隙間ができています。これは、tableタグのデフォルトボーダーの太さ分、セルとセルの間が離れているためです。これを何とかするためには、tableのスタイルシートに、隙間を無くす記述を入れます。-------}「border-spacing」は、ボーダーの太さを指定します。「border-collapse」は、隣接ボーダーを重ねるかどうか(隙間を詰めるかどうか)を指定します。「collapse」は隙間を詰める「separate」は隙間を開けるです。この記述を加えて表示すると、以下のようになります。あとは、角丸指定をtableタグのスタイルシートに加えればOKです。-------}実際に見てみると・・・・あれ?角が丸くなっていません。角丸指定を入れたのに、角が丸くなりませんでした。原因は隙間を埋める「collapse」が角丸の邪魔をしていました。collapse;」指定は、角丸指定があっても、角丸になりません。以下の指定に変更します。指定は、隣接セルのボーダーをあける指定ですが、つめる指定だと、角丸分の隙間ごとつめてしまい、角丸にならないようです。この指定で表示したものがこちらになります。角丸テーブルになりました。collapse;」を指定した覚えはないのに、角丸になりませんでした。separate;」を指定すればよいのです。」が指定されていただけでした・・。tableタグとは、奥の深いものだと改めて気づかされました。今回のレポートは以上です。読んでいただいてありがとうございました。スポンサーリンクこのような記事も読まれています(広告を含んでいます)ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。鋭意ご対応申し上げます。プリンタの紙詰まりが直らない原因を特定しました。RAW現像で写真をより明るく綺麗に補正する。wordで「目次をすべて更新する」実行で改ページが消える問題に対処。officeobataシェアしていただければ嬉しいです。※ボタンをクリックすると電話がかかります。...フォームクリックで周囲が青くならないようにする。検索フォームをおしゃれに組むことはよくあることです。...白くなりすぎる写真をマニュアル適正露出で撮影する。撮影した写真を後から見てみると「白っぽい」ということがしばしばあります。...水平撮影を上手くやるコツ。撮影技術は覚えきれないぐらい沢山ありますが、基本は数えるほどしかありません。...プログラミング授業は将来なんの役にたつの?プログラマーで役に立ったこと。令和2年4月から小学校でプログラミング授業が開始されます。レスポンスではありません」となり見出しが自動下書きとなる現象に対処ワードプレスは今やホームページのツールとして一般化しています。...動物園の檻を撮影テクニックで消してみる。動物園での撮影は、基本檻越しに撮影します。...PHPフォーム送信しても、現在の表示位置をキープできるようするテクニックホームページでリンクジャンプすると、表示位置はページの先頭位置になります。賢志]ホームページにマーケティングを盛り込んだ「ビジネスホームページ」を制作、コンサルをさせていただいております。問題には原因があり、原因を解決すると成果がついてきます。本ブログはwebマーケティングに主眼を置いていますがプログラマーもしており、パソコン・ソフトに関することも書いています。