html table with slash splitting the leftup cell

Question

Me pregunto cómo escribir en html una tabla con barra cortando la celda izquierda? es decir, para la celda izquierda de la tabla, hay una línea diagonal que la divide en dos partes, con algunos textos en ambos lados.

Answer 1

Dado que HTML se basa en objetos de cuadro, no hay forma de lograrlo con elementos estándar.

La forma más sencilla de lograr esto, sería la de dividir la célula en tres columnas, y utilizar una imagen de fondoen la columna del medio que imita la frontera-ancho de la celda de la tabla.

Este efecto se puede lograr de la siguiente manera:

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

Nota:

• Los nombres de las clases previstas son, por ejemplo sólo con fines, es probable que desee para nombrar algo más "semánticamente correcto"
• An a Se requiere una imagen apropiada, en mis pruebas creé una línea diagonal simple de 1 píxel (que es free to use), sin embargo, por supuesto puede ser tan creativo como lo desee. En el ejemplo anterior, la imagen de fondo está configurada para alinearse en el centro absoluto de la celda, esto significa que puede crear una imagen lo más grande que desee para escalar en consecuencia. otros

Answer 2

Utilice una imagen de fondo para la celda que imita la división.

Answer 3

dos ideas:

fraccionado la barra hacia abajo en el medio y utilizarlo en ambos lados (que puede darle la vuelta, guardar una imagen)

No utilice mesas, si lo está haciendo diseño ... use CSS. Solo pensé que lo agregaría en caso de que intentara usar la división de imágenes de Photoshop o algo así. Terrible idea.