ここから本文です

HTMLを組んでいるのですが、tableを画像のようにしたいです。

アバター

ID非公開さん

2020/6/2822:12:27

HTMLを組んでいるのですが、tableを画像のようにしたいです。

画像上の斜線部分を画像下の斜線部分のように斜線部分の右側より、左側の枠を狭くしたいです。どうしたらいいでしょうか?

td&gt,tr&gt,斜線部分,nth-of-type,mytable tr,mytable td,table&gt

閲覧数:
32
回答数:
3

違反報告

ベストアンサーに選ばれた回答

fengxianさん

2020/6/2900:01:04

★ CSS

TABLE {width: 500px; border-collapse: collapse;}
TD {border-collapse: collapse; border: red solid 1px;}

★ HTML

<table>
<col style="width: 150px;">
<col style="width: 350px;">
<tr>
<td colspan="2">1行目</td>
</tr>
<tr>
<td>2行目左</td>
<td>2行目右</td>
</tr>
<tr>
<td>3行目左</td>
<td>3行目右</td>
</tr>
</table>

表現したいのが TABLE ならばこんな感じ。幅や境界線の色、太さは調節してください。

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

プロフィール画像

カテゴリマスター

oishii_mahouさん

2020/6/2823:53:34

単純にセルの横幅をそれぞれ指定すればいいだけ。

────────────────
【 HTML 】

<table id="mytable">
<tr><td colspan="2"></td></tr>
<tr><td></td><td></td></tr>
</table>


【 CSS 】

/* テーブル */
#mytable { border-collapse: collapse }
/* テーブル|セル */
#mytable td { height: 40px; border: solid 1px #666 }
/* テーブル|セル|左 */
#mytable tr:nth-of-type(2) td:nth-of-type(1){ width: 200px }
/* テーブル|セル|右 */
#mytable tr:nth-of-type(2) td:nth-of-type(2){ width: 600px }
────────────────


<table> 全体の横幅を固定する場合は、
左のセルだけ width を指定して、
右のセルの width は未指定(auto)にしておく。

────────────────
【 HTML 】

<table id="mytable">
<tr><td colspan="2"></td></tr>
<tr><td></td><td></td></tr>
</table>


【 CSS 】

/* テーブル */
#mytable { border-collapse: collapse; width: 800px }
/* テーブル|セル */
#mytable td { height: 40px; border: solid 1px #666 }
/* テーブル|セル|左 */
#mytable tr:nth-of-type(2) td:nth-of-type(1){ width: 200px }
────────────────

nic********さん

2020/6/2822:17:03

* 単にBとCでwidthを変える
* Cの方は複数のtdをcolspanで連結する
あたりかな。どっちを採用するかは、票の意味を考えれば自然に決まってくるだろう。

レイアウトだけが目的ならflexboxを使った方が明らかに手っ取り早いのでtableを使うこと自体が間違い。

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる