Rounded style table html

Navigation
1

Greetings I want to obtain a format like the following:

Update The result I get is the following:

my code: 

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

Update 26-12-2018

This code in effect generates the desired borders, but because I use a library Xhtml2PDF does not apply certain styles like: 

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

Maybe someone could guide me or indicate what I'm failing. thanks .. !!

    
asked by Diego Avila 21.12.2018 в 21:05
source

3 answers

4

Create the class that your table would use and define it only to the tables you want with a rounded edge: 

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

If you want it to work for all browsers it is important to define: 

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

Example: 

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

Example:

    
answered by 21.12.2018 / 21:52
source
0

As you have it, the style is applied to all the <table> tags Define a class and apply it only to the tables you want to modify.

Example: 

.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>
    
answered by 21.12.2018 в 21:14
0

Respecting Your Code You Can Do This So That All Columns (Elements) of the Table Take the CSS Format, if you put more Columns in Rows (Elements) you can change the class="class_table" and put-it instead of in the column in the row ... 

<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>
    
answered by 23.12.2018 в 01:48
Use a cycle in bash with cat How to convert a variable from undefined to empty