ホームページ  >  記事  >  ウェブフロントエンド  >  CSSでセルを結合する方法

CSSでセルを結合する方法

藏色散人
藏色散人オリジナル
2020-11-17 13:44:399261ブラウズ

CSS でセルを結合する方法: 最初に HTML サンプル ファイルを作成し、次に、colspan を設定して列を結合し、最後に rowspan を設定して行を結合します。

CSSでセルを結合する方法

# 推奨: 「

css ビデオ チュートリアル #」

Css テーブルのセル結合#colspan は結合された列であり、rowspan は結合された行です。rowspan="2" などの行を結合すると、次の行 tr の列は 1 つ少なくなります。列を結合した場合、colspan="2" の列は、この行は次のようになります。 列が 1 つ少なくなります。

<table border="1" style={{margin:200}}>
      <tbody>
        <tr>
          <th colspan="2">我是占位符</th>
          <th colspan="2">我是占位符</th>
        </tr>
        <tr>
          <th rowspan="2">我是占位符</th>
          <th>我是占位符</th>
          <th>我是占位符</th>
          <th>我是占位符</th>
        </tr>
        <tr>
          <th>我是占位符</th>
          <th>我是占位符</th>
          <th>我是占位符</th>
        </tr>
      </tbody>
    </table>

Effect

CSSでセルを結合する方法css3 スラッシュ ヘッダー

<td >
    <div class="biaoTou">       
    </div>
</td>
.biaoTou {  
  border-top: 200px #199fff solid; /*上边框宽度等于表格第一行行高*/  
  border-left: 200px #ff8838 solid; /*左边框宽度等于表格第一行第一格宽度*/  
}

以上がCSSでセルを結合する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。