1

introducir la descripción de la imagen aquíQuiero poner una linea que pase por en medio de los td que tengan la clase "linea". Codigo html.

 <table border="1" cellpadding="0" cellspacing="0">
            <tr>
                <td>ejemplo <div class="linea"></div></td>
                <td>ejemplo</td>
                <td>ejemplo</td>
                <td>ejemplo</td>
                <td>ejemplo</td>
            </tr>
<tr>
                <td>ejemplo <div class="linea"></div></td>
                <td>ejemplo</td>
                <td>ejemplo</td>
                <td>ejemplo</td>
                <td>ejemplo</td>
            </tr>

    </table>

codigo en css

.linea:after {
            content: "";
            border-right: 5px solid orange;
            /* margin-right: 60px; */
            z-index: 4;
            float: left;
        }

lo que se espera:

la linea debe mostrarse por encima de los td con la clase linea, y en el medio de su porcentaje.

2 respuestas 2

1

En lo personal evitaría contaminar mi html y lo realizaría con puro css.

Los css estarian aplicados solo a primer td encontrado en la tabla, lo cual se realiza con: td:first-child, posterior a eso utilizar Pseudo-elemento como el before, o el after, luego una posición en porcentajes que es relativo al tr.

Ejemplo.

td:first-child{
position:relative;
}
td:first-child:before{
    content:' ';
    position:absolute;
    border: 2px solid #DEB930;
    left:50%;
    height:96%;
  }
<table border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>Col1</td>
    <td>Col2</td>
    <td>Col3</td>
    <td>Col4</td>
    <td>Col5</td>
  </tr>
  <tr>
    <td>Col1</td>
    <td>Col2</td>
    <td>Col3</td>
    <td>Col4</td>
    <td>Col5</td>
  </tr>
</table>

1

Wendi, te dejo un ejemplo, espero que te sirva. Ten en cuenta que el elemento que contenga el div tiene que explicitar una posición relativa.

td {
  position: relative;
}
.linea {
  content: "";
  position: absolute;
  top:0;
  float: left;
  width: 50%;
  border-right: 2px solid #000;
}
<table border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>ejemplo <div class="linea">&nbsp</div></td>
    <td>ejemplo</td>
    <td>ejemplo</td>
    <td>ejemplo</td>
    <td>ejemplo</td>
  </tr>
  <tr>
    <td>ejemplo <div class="linea">&nbsp</div></td>
    <td>ejemplo</td>
    <td>ejemplo</td>
    <td>ejemplo</td>
    <td>ejemplo</td>
  </tr>
</table>

1
  • gracias! porque pones un espacio en blanco? &nbsp al quitarlo desparece la linea. gracias de antemano! el 28 may. 2020 a las 20:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.