html tablosu bölü sol bölmeyi böler

Question

Soldaki hücreyi bölen eğik çizgi olan bir tabloyu nasıl yazacağımı merak ediyorum. yani, tablodaki soldaki hücre için, her iki tarafta bazı metinler ile iki parçaya bölen çapraz bir çizgi vardır.

Answer 1

HTML, kutu nesnelerini temel aldığından, bunu standart öğelerle gerçekleştirmenin bir yolu yoktur.

bunu başarmak için en basit yolu, üç sütun içine hücreyi bölmek, ve masa hücresinin sınır genişliği taklit orta sütunda bir Arka plan resmi kullanmak olacaktır.

<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> 

Not: sağlanan

• sınıf adları sadece örnek olma amacını taşımaktadır, muhtemelen adı isteyeceklerdir şöyle

  

  Bu etki elde edilebilir onlara daha fazla "semantik olarak uygun" bir şey

• Bir Uygun bir görüntü gerekli olacaktır, testlerimde basit bir 1 piksel diyagonal çizgi oluşturdum (ki bu free to use'dur), ancak elbette istediğiniz kadar yaratıcı olabilirsiniz. Yukarıdaki örnekte, arka plan resmi, hücrenin mutlak merkezinde hizalanacak şekilde ayarlanmıştır; bu, görüntüyü, uygun şekilde ölçeklendirmek için istediğiniz kadar geniş bir şekilde oluşturabileceğiniz anlamına gelir.

Answer 2

Bölünmeyi taklit eden hücre için bir arka plan resmi kullanın.

Answer 3

Diğer iki fikirler:

Bölünmüş çizgi görüntü yarısında aşağı ve (bir resim, ters çevirip kaydedebilirsiniz) her iki tarafta kullanmak

yapıyorsun eğer tablolar kullanmayın düzen ... CSS'yi kullanın. Sadece Photoshop'un görüntü dilimlemesini veya bir şeyini kullanmaya çalıştığınız zaman bunu ekleyeceğimi düşündüm. Korkunç bir fikir.