Estilo redondeado table html

publicado por: Anonymous

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:

_x000D_

_x000D_

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

_x000D_

_x000D_

_x000D_

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

solución

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:

_x000D_

_x000D_

 _x000D_
    _x000D_
       .round_table {                   _x000D_
            border-collapse: separate;_x000D_
            border-spacing: 10;_x000D_
            border: 1px solid black;_x000D_
            border-radius: 15px;_x000D_
            -moz-border-radius: 20px;_x000D_
            padding: 2px;_x000D_
            -webkit-border-radius: 5px;_x000D_
        }_x000D_
      _x000D_
      table {                   _x000D_
         border-collapse: separate;_x000D_
         border-spacing: 10;_x000D_
         border: 1px solid black;        _x000D_
         padding: 2px;_x000D_
        }_x000D_
            _x000D_
            th {_x000D_
                border-left:solid black 1px;_x000D_
                border-top:solid black 1px;_x000D_
            }    _x000D_
            th {_x000D_
                background-color: orange;_x000D_
                border-top: none;_x000D_
            }_x000D_
            _x000D_
    _x000D_
   

_x000D_

         <table>        _x000D_
                <tr>_x000D_
                    <th>Id</th>_x000D_
                    <th>Nombre</th>_x000D_
                    <th>Descripción</th>_x000D_
                </tr>_x000D_
                _x000D_
                <tr>_x000D_
                    <td>1</td>_x000D_
                    <td>Elena</td>_x000D_
                    <td>Cute</td>_x000D_
                </tr>_x000D_
                <tr>_x000D_
                    <td>2</td>_x000D_
                    <td>Tegito123</td>_x000D_
                    <td>Quiet</td>_x000D_
                </tr>_x000D_
                 <tr>_x000D_
                    <td>3</td>_x000D_
                    <td>Jorge</td>_x000D_
                    <td>Crazy</td>_x000D_
                </tr>_x000D_
            </table>_x000D_
    _x000D_
   _x000D_
    _x000D_
            <table class=round_table >        _x000D_
                <tr>_x000D_
                    <th>Id</th>_x000D_
                    <th>Nombre</th>_x000D_
                    <th>Descripción</th>_x000D_
                </tr>_x000D_
                _x000D_
                <tr>_x000D_
                    <td>1</td>_x000D_
                    <td>Elena</td>_x000D_
                    <td>Cute</td>_x000D_
                </tr>_x000D_
                <tr>_x000D_
                    <td>2</td>_x000D_
                    <td>Tegito123</td>_x000D_
                    <td>Quiet</td>_x000D_
                </tr>_x000D_
                 <tr>_x000D_
                    <td>3</td>_x000D_
                    <td>Jorge</td>_x000D_
                    <td>Crazy</td>_x000D_
                </tr>_x000D_
            </table>

_x000D_

_x000D_

_x000D_

Ejemplo:

introducir la descripción de la imagen aquí

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *