左のセルをスラッシュで分割したhtmlテーブル

Question

左のセルを分割するスラッシュ付きのテーブルをhtmlで書く方法を知りましたか？すなわち、テーブル内の左上のセルの場合、対角線が2つに分割され、両側にテキストがいくつかあります。

Answer 1

HTMLはボックスオブジェクトに基づいているため、標準要素でこれを実現する方法はありません。

これを達成するための最も簡単な方法は、3つの列にあなたのセルを分割し、あなたのテーブルセルの枠線幅を模倣中央の列に背景画像を使用することです。

次のようにこの効果を達成することができます。

<style type="text/css"> 
    table { 
     border-spacing: 0; 
    } 

    table tr td { 
     border: 1px solid black; 

    } 

    table .cell-left { 
     border-right: 0; 
    } 

    table .cell-middle { 
     border-left: 0; 
     border-right: 0; 
     background-image: url(slash.png); 
     background-position: center center; 
    } 

    table .cell-right { 
     border-left: 0; 
    } 
</style> 

    <table> 
     <tr> 
      <td class="cell-left">Cell A</td> 
      <td class="cell-middle">&nbsp;</td> 
      <td class="cell-right">Cell B</td> 
     </tr> 
    </table> 

注：提供されるクラス名は、例えば目的にのみ、あなたはおそらく名前になるでしょうしている

• 彼らは何かより "意味的に適切"
• a適切なイメージが必要になりますが、私のテストでは単純な1ピクセルの対角線（あなたはfree to use）を作成しましたが、もちろんあなたが望むほど創造的であることができます。上記の例では、背景画像がセルの絶対的な中心に揃うように設定されています。これは、それに応じて拡大するために好きなだけ大きな画像を作成できることを意味します。

Answer 2

分割を模倣するセルに背景画像を使用します。

Answer 3

二つの他のアイデア：

スプリットスラッシュ画像半分ダウンし、両側にそれを使用する（あなたは画像を保存し、それを反転することができます）

あなたがやっている場合は、テーブルを使用しないでくださいレイアウト... CSSを使用します。ちょうど私があなたがPhotoshopのイメージをスライスするか何かを使用しようとしていた場合に追加すると思った。恐ろしいアイデア。