hola buenos dias, necesito darle estilo a una tabla que viene de excel…
necesito que se vea como el cuadro de arriba
intento con style en el html
pero lo toma con un borde
cabe mencionar que la informacion la copio en el cuerpo de html, viene desde la actividad Create HTML Content
me ayudaria ucho saber como darle el estilo que nesito
Hey @mively
Avoid using ID selectors like #table2, because Create HTML Content doesn’t assign IDs by default. Use element selectors (table, td, th) instead.
Here’s example:
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
font-family: Arial, sans-serif;
}
th {
background-color: #e0e0e0;
border: 1px solid #000;
padding: 8px;
text-align: center;
}
td {
border: 1px solid #000;
padding: 8px;
text-align: right;
}
tr:last-child {
font-weight: bold;
background-color: #e0e0e0;
}
tr:last-child td {
border-top: 3px solid orange;
}
</style>
</head>
<body>
<h3>Resumen Cartera de Clientes</h3>
<table>
<tr>
<th>Descripción</th>
<th>Monto</th>
</tr>
<tr>
<td style="text-align:left;">Por Vencer</td>
<td>3.971.562.551</td>
</tr>
<tr>
<td style="text-align:left;">Vencidos</td>
<td>1.686.189.463</td>
</tr>
<tr>
<td style="text-align:left;">Facturas Rechazadas</td>
<td>20.902.862</td>
</tr>
<tr>
<td style="text-align:left;">Guias por Facturar</td>
<td>1.162.516.107</td>
</tr>
<tr>
<td style="text-align:left;">Total General</td>
<td>6.841.170.983</td>
</tr>
</table>
</body>
</html>
el tema es que la tabla viene de la actividad, creaet html content
y en el html donde lo ocupo, lo llamo asi..
<div style="background-color: #ffffff; padding: 20px; margin-top: 0px; width: fit-content; margin-left: auto; margin-right: auto; border: none; outline: none; box-shadow: none;">
<h2 style="font-size: 20px; font-weight: 600; color: rgb(102,102,102); text-align: center; margin: 20px 0 20px 0;">
Resumen Cartera de Clientes
</h2>
<table id="table2" style="width: 280px; font-size: 14px; margin: 0 auto 10px auto; border-collapse: collapse; color: #333;">
<tbody >
{tablaexcel}
</tbody>
</table>
<p style="font-size: 12px; color: #333; text-align: center; margin-top: 10px;">
*Las guías por facturar consideran valores netos.*
</p>
</div>
no puedo poner tr ni td, para darles estilo
@mively
If you can’t modify td or tr directly, you can still apply styling by using a <style> block and targeting the table by its id="table2". Style the tags globally – e.g., #table2 td, #table2 tr:last-child td. This way, you don’t need to modify the {tablaexcel} content. Here’s a working example you can preview in a browser or use directly in UiPath:
<html>
<head>
<style>
#table2 {
border-collapse: collapse;
width: 280px;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
#table2 th {
background-color: #e0e0e0;
border: 1px solid #000;
padding: 8px;
text-align: center;
}
#table2 td {
border: 1px solid #000;
padding: 8px;
text-align: right;
}
#table2 tr:last-child {
font-weight: bold;
background-color: #e0e0e0;
}
#table2 tr:last-child td {
border-top: 3px solid orange;
}
</style>
</head>
<body>
<div style="background-color: #ffffff; padding: 20px; margin-top: 0px; width: fit-content; margin-left: auto; margin-right: auto; border: none; outline: none; box-shadow: none;">
<h2 style="font-size: 20px; font-weight: 600; color: rgb(102,102,102); text-align: center; margin: 20px 0 20px 0;">
Resumen Cartera de Clientes
</h2>
<table id="table2">
<tbody>
{tablaexcel}
</tbody>
</table>
<p style="font-size: 12px; color: #333; text-align: center; margin-top: 10px;">
*Las guías por facturar consideran valores netos.*
</p>
</div>
</body>
</html>
@mively
Would you mind sharing the actual content of the {tablaexcel} variable?
This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.
