1

Saludos deseo obtener un formato como el siguiente:

introducir la descripción de la imagen aquí

Actualizacion el resultado que obtengo es el siguiente:

introducir la descripción de la imagen aquí

mi codigo:

<style>
    .clase_table {
        border-collapse: separate;
        border-spacing: 10;
        border: 1px solid black;
        border-radius: 15px;
        -moz-border-radius: 20px;
        padding: 2px;
    }
    
    </style>
                <table class="clase_table">
                    <tr>
                        <td><b>R.U.C.:</b> {{ ruc_empresa }}</td>
                    </tr>
                    <tr >
                        <td><b>FACTURA:</b>{{ numero_factura }} </td>
                    </tr>
                    <tr>
                        <td><b>NÚMERO DE AUTORIZACIÓN:</b><br>{{ clave_acceso }}</td>
                    </tr>
                    <tr>
                        <td><b>FECHA Y HORA DE AUTORIZACIÓN:</b></td>
                    </tr>
                    <tr>
                        <td ><b>AMBIENTE:</b> PRUEBAS</td>
                    </tr>
                    <tr>
                        <td><b>EMISIÓN:</b> NORMAL</td>
                    </tr>
                    <tr>
                        <td ><b>CLAVE DE ACCESO:</b><br>{{ clave_acceso }}</td>
                    </tr>
                    <tr>
                        <td><img src="static/images/barcode_example.png" width="300" height="50" alt=""></td>
                    </tr>
                </table>

Actualizacion 26-12-2018

Este codigo genera en efecto los bordes deseados, pero debido a que uso una libreria Xhtml2PDF no aplica ciertos estilos como:

background-color
border-bottom-color, border-bottom-style, border-bottom-width
border-left-color, border-left-style, border-left-width
border-right-color, border-right-style, border-right-width
border-top-color, border-top-style, border-top-width
colordisplay
font-family, font-size, font-style, font-weight
height
line-height, list-style-type
margin-bottom, margin-left, margin-right, margin-top
padding-bottom, padding-left, padding-right, padding-top
page-break-after, page-break-before
size
text-align, text-decoration, text-indent
vertical-align
white-space
width
zoom

Quiza alguien me podria guiar o indicar en que estoy fallando. gracias..!!

7
  • No comprendo bien cual es el problema que te genera, el codigo que tenes redondea bien los bordes de la tabla lo acabo de verificar, ahora si tenes 4 tablas y solo queres que salga en 1 crea una clase css y llamala solo de la tabla que necesites. es eso? jsfiddle.net/wvLatrhq
    – Juan
    Commented el 21 dic. 2018 a las 20:20
  • Tendrias que pones mas codigo, parte de la tabla o del css, tal vez tenes un estilo anterior que esta poniendo bordes a toda la tabla, y ahora queres poner el nuevo pero te sigue tomando el anterior, porque como te mostre en el ejeplo de arriba ese css q pones hace lo q necesitas. Dale click derecho a la tabla / inspeccionar y mira los estilos que tiene, si tiene otros es porque hay un estilo antes del que vos queres poner i.imgur.com/nqehRfG.png
    – Juan
    Commented el 21 dic. 2018 a las 20:29
  • ¿Deseas que se aplique el borde o que no se aplique?@Tegito123
    – Jorgesys
    Commented el 21 dic. 2018 a las 20:54
  • deseo que se aplique solo los bordes externos y redondeados como la imagen de arriba... Commented el 21 dic. 2018 a las 20:58
  • @Tegito123 pensaría que te faltaba agregar : border:solid black 1px; border-radius:10px; pero ahora veo tu actualización, es un poco extraño, ¿Que navegador usas?
    – Jorgesys
    Commented el 21 dic. 2018 a las 21:08

4 respuestas 4

4

Crea la clase que utilizaría tu tabla y definela solo a las tablas que desees con borde redondeado:

  .round_table {
                    border-collapse:separate;
                    border-spacing: 10;
                    border:solid black 1px;
                    border-radius:10px;
                    -moz-border-radius:10px;
                    -webkit-border-radius: 5px;    
                }

... ...

  <table class=round_table >    

Si deseas que funcione para todos los browsers es importante definir:

 border-radius: 15px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Ejemplo:

 
    
       .round_table {                   
            border-collapse: separate;
            border-spacing: 10;
            border: 1px solid black;
            border-radius: 15px;
            -moz-border-radius: 20px;
            padding: 2px;
            -webkit-border-radius: 5px;
        }
      
      table {                   
         border-collapse: separate;
         border-spacing: 10;
         border: 1px solid black;        
         padding: 2px;
        }
            
            th {
                border-left:solid black 1px;
                border-top:solid black 1px;
            }    
            th {
                background-color: orange;
                border-top: none;
            }
            
    
   
         <table>        
                <tr>
                    <th>Id</th>
                    <th>Nombre</th>
                    <th>Descripción</th>
                </tr>
                
                <tr>
                    <td>1</td>
                    <td>Elena</td>
                    <td>Cute</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Tegito123</td>
                    <td>Quiet</td>
                </tr>
                 <tr>
                    <td>3</td>
                    <td>Jorge</td>
                    <td>Crazy</td>
                </tr>
            </table>
    
   
    
            <table class=round_table >        
                <tr>
                    <th>Id</th>
                    <th>Nombre</th>
                    <th>Descripción</th>
                </tr>
                
                <tr>
                    <td>1</td>
                    <td>Elena</td>
                    <td>Cute</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Tegito123</td>
                    <td>Quiet</td>
                </tr>
                 <tr>
                    <td>3</td>
                    <td>Jorge</td>
                    <td>Crazy</td>
                </tr>
            </table>

Ejemplo:

introducir la descripción de la imagen aquí

0

Como lo tienes se le aplica el estilo a todos las etiquetas <table> Define una clase y aplicarle solo a las tablas que quieras modificar.

Ejemplo:

.clase_table {
        border-collapse: separate;
        border-spacing: 10;
    }
    .clase_table{
        border: 1px solid black;
        border-radius: 10px;
        -moz-border-radius: 10px;
        padding: 10px;
    }
    <table class="clase_table"></table>

0

Respetando Tu Código Puedes Hacer Esto Para Que Todas Las Columnas ( Elementos ) de la Tabla Cojan el Formato del CSS, si pones mas Columnas en Filas ( Elementos ) puedes cambiar el class="clase_table" y poner-lo en vez de en la columna en la fila...

<style>
.clase_table {
    border-collapse: separate;
    border-spacing: 10;
    border: 1px solid black;
    border-radius: 15px;
    -moz-border-radius: 20px;
    padding: 2px;
}
</style>
<table class="clase_table">
<tr>
    <td class="clase_table" ><b>R.U.C.:</b> {{ ruc_empresa }}</td>
</tr>
<tr>
    <td class="clase_table" ><b>FACTURA:</b>{{ numero_factura }} </td>
</tr>
<tr>
    <td class="clase_table" ><b>NÚMERO DE AUTORIZACIÓN:</b><br>{{ clave_acceso }}</td>
</tr>
<tr>
    <td class="clase_table" ><b>FECHA Y HORA DE AUTORIZACIÓN:</b></td>
</tr>
<tr>
    <td class="clase_table" ><b>AMBIENTE:</b> PRUEBAS</td>
</tr>
<tr>
    <td class="clase_table" ><b>EMISIÓN:</b> NORMAL</td>
</tr>
<tr>
    <td class="clase_table" ><b>CLAVE DE ACCESO:</b><br>{{ clave_acceso }}</td>
</tr>
<tr>
  <td class="clase_table" ><img src="static/images/barcode_example.png" width="300" height="50" alt=""></td>
</tr>
</table>

0

El problema es que la propiedad

border-collapse: collapse

No permite que se establezcan los bordes redondeados, igual como no estás utilizando los bordes definidos en las etiquetas <td> y <th>, puedes eliminar border-collapse y debería bastar para que border-radius entre en efecto.

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.