BinaryDevelop
  1. ホーム
  2. html

[解決済み] テーブルの特定の行をボーダーで囲む？

2022-08-20 21:28:51

質問

テーブルの特定の行の周りにボーダーを置くことができるHTML/CSSをデザインしようとしています。はい、私はレイアウトのためにテーブルを使用することになっていないことを知っているが、私はまだ完全にそれを置き換えるために十分なCSSを知らない。

とにかく、私は複数の行と列を持つテーブルを持っており、一部は rowspan と colspan でマージされています。現在、私は 4 つの別々の CSS クラス (上、下、左、右) を使用しており、それらを <td> セルにそれぞれ付けています。 

.top {
  border-top: thin solid;
  border-color: black;
}

.bottom {
  border-bottom: thin solid;
  border-color: black;
}

.left {
  border-left: thin solid;
  border-color: black;
}

.right {
  border-right: thin solid;
  border-color: black;
}

<html>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr>
      <td class="top left">one</td>
      <td class="top right">two</td>
    </tr>
    <tr>
      <td class="bottom left">three</td>
      <td class="bottom right">four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr>
      <td class="top bottom left right" colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</html>

もっと簡単にできる方法はないでしょうか？私は、上部と下部を <tr> を適用してみましたが、うまくいきませんでした。(p.s. 私はCSSの初心者なので、私が見逃している本当に基本的な解決策があるかもしれません。)

のノートです。 複数のボーダー部を持つ必要があるのですが。基本的なアイデアは、それぞれが複数の行を含む複数のボーダー状のクラスタを持っていることです。

どのように解決するのですか？

どのように tr {outline: thin solid black;} ? tr や tbody 要素で動作します。 が表示されます。 は IE 8+ を含むほとんどのブラウザと互換性があるように見えますが、それ以前は互換性がありません。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します