2

Estoy haciendo este modelo de plantilla con tablas html y tengo problemas con los bordes internos de td, quiero eliminar los bordes top, left, right de los td pero no logro de como hacerlo.

introducir la descripción de la imagen aquí

Esta seria mi tabla html :

<table class="" id="boleta" border="1">
  <tbody>
    <tr>
      <th style=" border: inset 0pt" colspan="23" align="center">
        <p align="center">BOLETA DE PAGO</p>
      </th>
    </tr>
    <tr>
      <td style=" border: inset 0pt" colspan="23"></td>
    </tr>


    <tr>
      <td style="border: medium transparent" colspan="6">Apellidos y Nombres </td>
      <td style=" border: inset 0pt"></td>
      <td colspan="3">Fecha de Ingreso </td>
      <td colspan="13" style="border: inset 0pt"></td>
    </tr>


    <tr>
      <td colspan="6">Rodriguez Grados Guadalupe Yaneth</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="3" align="right">01/11/2017</td>
      <td colspan="13" style=" border: inset 0pt"></td>
    </tr>


    <tr>
      <td style=" border: inset 0pt" colspan="23"></td>
    </tr>
    <tr>
      <td style=" border: inset 0pt" colspan="3">Doc. Identidad</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="4">Esalud</td>
      <td colspan="1"></td>
      <td colspan="4">CUSPP AFP Prima</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="3">Area</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="3">Puesto</td>
    </tr>
    <tr>
      <td colspan="3" align="right">09151487</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="4" align="right">6453456TRSDCO</td>
      <td colspan="1"></td>
      <td colspan="4" align="right">546840GRGRDO</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="3">Gerencia</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="3">Gerente General</td>
    </tr>
    <tr>
      <td style=" border: inset 0pt" colspan="23"></td>
    </tr>

    <tr>
      <td colspan="3">Dias Trabajados</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="3">Horas Trabajados </td>
      <td colspan="16" style=" border: inset 0pt"></td>
    </tr>


    <tr>
      <td colspan="3" style=" border: inset 0pt" align="right">23</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="3" style=" border: inset 0pt" align="right">232</td>
      <td colspan="16" style=" border: inset 0pt"></td>
    </tr>

    <tr>
      <td style=" border: inset 0pt" colspan="23"></td>
    </tr>

    <tr>
      <td style=" border: inset 0pt" colspan="3">Ingresos</td>
      <td style=" border: inset 0pt"></td>
      <td style=" border: inset 0pt" colspan="2"></td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2">Desucciones</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" style=" border: inset 0pt"></td>
      <td colspan="11">Aportaciones</td>
    </tr>
    <tr>
      <td colspan="3">Haber Básico</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" align="right">3,500.00</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2">AFP Ahorros</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" align="right">358.00</td>
      <td colspan="2">Essalud</td>
      <td colspan="11">359.00</td>
    </tr>
    <tr>
      <td colspan="3">Asignacion Familiar</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" align="right">500.00</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2">AFP Comisiones</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" align="right">358.00</td>
      <td colspan="2" style=" border: inset 0pt"></td>
      <td colspan="11" style=" border: inset 0pt"></td>
    </tr>
    <tr>
      <td colspan="3">Bonificacion</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" align="right">0.00</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2">AFP Seguros</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" align="right">58.00</td>
      <td colspan="2" style=" border: inset 0pt"></td>
      <td colspan="11" style=" border: inset 0pt"></td>
    </tr>

    <tr>
      <td colspan="3">Gratificacion</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" align="right">0.00</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2">IR 5ta Categoria</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" align="right">48.00</td>
      <td colspan="2" style=" border: inset 0pt"></td>
      <td colspan="11" style=" border: inset 0pt"></td>
    </tr>

    <tr>
      <td colspan="3">Total Ingresos</td>
      <td style=" border: inset 0pt" style=" border: inset 0pt"></td>
      <td colspan="2" align="right">4,00.00</td>
      <td style=" border: inset 0pt" style=" border: inset 0pt"></td>
      <td colspan="2">Total Deducciones </td>
      <td style=" border: inset 0pt" style=" border: inset 0pt"></td>
      <td colspan="2" align="right">238.00</td>
      <td colspan="2">Total Aportaciones</td>
      <td colspan="11" align="right"> 322.65</td>
    </tr>
    <tr>
      <td colspan="3" style=" border: inset 0pt"></td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" style=" border: inset 0pt"></td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" style=" border: inset 0pt"> </td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" style=" border: inset 0pt"></td>
      <td colspan="2">Neto a pagar </td>
      <td colspan="11" align="right">23,322.65</td>
    </tr>
    <tr>
      <td style="height: 120px;" rowspan="5" colspan="23"></td>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>

1

4 respuestas 4

2

Por lo que entiendo en tu pregunta, lo que necesitas es eliminar todos los bordes de las celdas a excepción del borde inferior de cada una de ellas. Si es esto correcto, lo que puedes hacer es aplicar una class específica con css para cada tr que lo necesite donde "reseteas" el border de todos los td que contiene ese tr para a continuación darle el border-bottom que necesitas.

He modificado ligeramente tu código para que veas como podría quedar. En este caso lo que yo he hecho es lo que arriba te comentaba, añadir una clase que he llamado .sinBorde a los tr para darle el estilo que quería:

.sinBorde td {border: 0; border-bottom:1px solid #000}
<table class="" id="boleta" border="1">
  <tbody>
    <tr>
      <th style=" border: inset 0pt" colspan="23" align="center">
        <p align="center">BOLETA DE PAGO</p>
      </th>
    </tr>
    <tr>
      <td style=" border: inset 0pt" colspan="23"></td>
    </tr>


    <tr class="sinBorde">
      <td style="border: medium transparent" colspan="6">Apellidos y Nombres </td>
      <td style=" border: inset 0pt"></td>
      <td colspan="3">Fecha de Ingreso </td>
      <td colspan="13" style="border: inset 0pt"></td>
    </tr>


    <tr class="sinBorde">
      <td colspan="6">Rodriguez Grados Guadalupe Yaneth</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="3" align="right">01/11/2017</td>
      <td colspan="13" style=" border: inset 0pt"></td>
    </tr>


    <tr class="sinBorde">
      <td style=" border: inset 0pt" colspan="23"></td>
    </tr>
    <tr class="sinBorde">
      <td style=" border: inset 0pt" colspan="3">Doc. Identidad</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="4">Esalud</td>
      <td colspan="1"></td>
      <td colspan="4">CUSPP AFP Prima</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="3">Area</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="3">Puesto</td>
    </tr>
    <tr class="sinBorde">
      <td colspan="3" align="right">09151487</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="4" align="right">6453456TRSDCO</td>
      <td colspan="1"></td>
      <td colspan="4" align="right">546840GRGRDO</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="3">Gerencia</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="3">Gerente General</td>
    </tr>
    <tr class="sinBorde">
      <td style=" border: inset 0pt" colspan="23"></td>
    </tr>

    <tr class="sinBorde">
      <td colspan="3">Dias Trabajados</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="3">Horas Trabajados </td>
      <td colspan="16" style=" border: inset 0pt"></td>
    </tr>


    <tr class="sinBorde">
      <td colspan="3" style=" border: inset 0pt" align="right">23</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="3" style=" border: inset 0pt" align="right">232</td>
      <td colspan="16" style=" border: inset 0pt"></td>
    </tr>

    <tr class="sinBorde">
      <td style=" border: inset 0pt" colspan="23"></td>
    </tr>

    <tr class="sinBorde">
      <td style=" border: inset 0pt" colspan="3">Ingresos</td>
      <td style=" border: inset 0pt"></td>
      <td style=" border: inset 0pt" colspan="2"></td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2">Desucciones</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" style=" border: inset 0pt"></td>
      <td colspan="11">Aportaciones</td>
    </tr>
    <tr class="sinBorde">
      <td colspan="3">Haber Básico</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" align="right">3,500.00</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2">AFP Ahorros</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" align="right">358.00</td>
      <td colspan="2">Essalud</td>
      <td colspan="11">359.00</td>
    </tr>
    <tr class="sinBorde">
      <td colspan="3">Asignacion Familiar</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" align="right">500.00</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2">AFP Comisiones</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" align="right">358.00</td>
      <td colspan="2" style=" border: inset 0pt"></td>
      <td colspan="11" style=" border: inset 0pt"></td>
    </tr>
    <tr class="sinBorde">
      <td colspan="3">Bonificacion</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" align="right">0.00</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2">AFP Seguros</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" align="right">58.00</td>
      <td colspan="2" style=" border: inset 0pt"></td>
      <td colspan="11" style=" border: inset 0pt"></td>
    </tr>

    <tr class="sinBorde">
      <td colspan="3">Gratificacion</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" align="right">0.00</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2">IR 5ta Categoria</td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" align="right">48.00</td>
      <td colspan="2" style=" border: inset 0pt"></td>
      <td colspan="11" style=" border: inset 0pt"></td>
    </tr>

    <tr class="sinBorde">
      <td colspan="3">Total Ingresos</td>
      <td style=" border: inset 0pt" style=" border: inset 0pt"></td>
      <td colspan="2" align="right">4,00.00</td>
      <td style=" border: inset 0pt" style=" border: inset 0pt"></td>
      <td colspan="2">Total Deducciones </td>
      <td style=" border: inset 0pt" style=" border: inset 0pt"></td>
      <td colspan="2" align="right">238.00</td>
      <td colspan="2">Total Aportaciones</td>
      <td colspan="11" align="right"> 322.65</td>
    </tr>
    <tr class="sinBorde">
      <td colspan="3" style=" border: inset 0pt"></td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" style=" border: inset 0pt"></td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" style=" border: inset 0pt"> </td>
      <td style=" border: inset 0pt"></td>
      <td colspan="2" style=" border: inset 0pt"></td>
      <td colspan="2">Neto a pagar </td>
      <td colspan="11" align="right">23,322.65</td>
    </tr>
    <tr class="sinBorde">
      <td style="height: 120px;" rowspan="5" colspan="23"></td>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>

Comaprto a continuación un enlace que puede resultar de interés y/o ayuda para el uso correcto de la propiedad border en css: border -CSS

1

Agrega cellspacing en 0 a la tabla.

<table class="" id="boleta" border="1" cellspacing="0">

Este CSS es para definir sólo el borde inferior cómo mencionas.

td {
    padding: 5px;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 1px solid black;
    border-left: 0px;
}
2
  • Lo puce igual pero no surgió ningún cambio Commented el 6 jun. 2018 a las 15:24
  • ¿Que hojas de estilo están incluidas en el proyecto? Commented el 6 jun. 2018 a las 15:38
0

El problema creo que lo tienes en tu css alguna clase esta haciendo que se comporte de la forma que indicas en la imagen, por que desde mi lado hice un copy paste a tu código y no tengo problemas con los bordes de la tabla que indicas en la imagen.

Te sugiero que vallas depurando tu css desde la consola del navegador para que vallas viendo donde esta el problema.

NOTA: usa clases, jamas metas sus estilos en las etiquetas html

0

solamente quitales el border-style y si quieres un borde plano ponle uno nuevo ya que el border-style lo quita

td {
    border-style: none;
    border: 1px solid black; //Cualquier otro tipo de borde como bottom que es el inferior o ninguno 
}

Como en algunos no quieres removerlos solamente haces una clase o añádele directamente el estilo, y así puedes añadir tus bordes al gusto

2
  • Solo quiere dejar los bordes inferiores. Debería ser border: 0px solid black; y border-bottom: 1px solid black; para poner los inferiores. Después si, que agregue clases donde quiera mas bordes. Commented el 8 abr. 2019 a las 13:52
  • por eso especifique en el codigo cualquier otro borde Commented el 8 abr. 2019 a las 14:02

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.