Tablica html z cięciem podziału komórki lewy

Question

Zastanawiam się, jak napisać w html tabeli z cięciem podziału komórki lewy? tj. dla komórki lewa w tabeli znajduje się linia przekątna dzieląca ją na dwie części, z pewnymi tekstami po obu stronach.

Answer 1

Ponieważ HTML opiera się na obiektach pudełkowych, nie można tego osiągnąć przy użyciu standardowych elementów.

Najprostszym sposobem osiągnięcia tego celu, byłoby podzielić komórkę na trzech kolumnach i użyć background-image w środkowej kolumniektóry naśladuje border-width swojej komórce tabeli.

Efekt ten można osiągnąć w następujący sposób:

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

Uwaga:

• Nazwy klas przewidziane są na przykład tylko do celów, prawdopodobnie chcą nazwy im coś bardziej "semantycznie właściwego"
• wymagany będzie odpowiedni obraz, w moich testach stworzyłem prostą, 1-pikselową linię ukośną (którą jesteś free to use), jednak możesz oczywiście być tak kreatywny, jak chcesz. W powyższym przykładzie obraz tła jest ustawiony tak, aby wyrównać w absolutnym środku komórki, co oznacza, że ​​możesz utworzyć obraz tak duży, jak chcesz, aby odpowiednio skalować.

Answer 2

Użyj obrazu tła dla komórki naśladującej podział.

Answer 3

Dwa inne pomysły:

podzielić obraz ukośnik dół pół i używać go z obu stron (można go odwrócić, zapisać obraz)

Nie używać tabel, jeśli robisz układ ... użyj CSS. Pomyślałem, że dodam to na wypadek, gdybyś próbował użyć wycinania zdjęć w Photoshopie lub czegoś podobnego. Okropny pomysł.