I would like to leave my HTML code this way:
However my code is not working perfectly, here is my code:
<style>
body{
font-family: Verdana;
}
#titulo{
color: #FFFFFF;
background-color: #5481eb;
font-size: 14;
font-weight: bold;
text-align: center;
border:2px solid #000;
}
.tabela-up-left{
color: #FFFFFF;
font-weight: bold;
font-size: 12px;
text-align: center;
background-color: #707070;
border:2px solid #000;
}
.tabela-up-right{
color: #FFFFFF;
font-weight: bold;
background-color: #c4c0c0;
text-align: left;
font-size: 10px;
border:2px solid #000;
width:100%;
}
.tabela-down{
color: #FFFFFF;
font-weight: bold;
font-size: 12px;
text-align: center;
background-color: #707070;
border: 2px solid #000;
width: 45%;
}
.tabela-description{
font-size: 12px;
text-align: center;
border: 2px solid #000;
width: 45%;
}
</style>
<div id = "titulo">
<h1>LISTAGEM DE PENDÊNCIAS</h1>
</div>
<table>
<thead>
<tr>
<td class = "tabela-up-left">PROTOCOLO:</td>
<td class = "tabela-up-right">123</td>
</tr>
<tr>
<td class = "tabela-up-left">CÓDIGO DO LOTE:</td>
<td class = "tabela-up-right">7773</td>
</tr>
</thead>
</table>
<table>
<tr>
<td class = "tabela-down">VÍNCULO</td>
<td class = "tabela-down">PÊNDENCIA</td>
<td class = "tabela-down">STATUS</td>
</tr>
</table>
<table>
<tr>
<td class = "tabela-description">Dados gerais</td>
<td class = "tabela-description">Instrumento de Titulação</td>
<td class = "tabela-description">Nenhum</td>
</tr>
</table>
The results of my code is:
I have some problems to organize the css in the html, that is why my code is not work well. I do not know for example to organize the rows of the table, mainly the spaces in "PROTOCOLO" and "2/2021". I am using the library dompdf. Someone can help me?
CodePudding user response:
try like below,
body{
font-family: Verdana;
}
#titulo{
color: #FFFFFF;
background-color: #5481eb;
font-size: 14;
font-weight: bold;
text-align: center;
border:1px solid rgb(114, 110, 110);
}
.tabela-up-left{
color: #FFFFFF;
font-weight: bold;
font-size: 12px;
text-align: center;
background-color: #707070;
border:1px solid rgb(40 38 38);
padding: 6px;
}
.tabela-up-right{
color: #FFFFFF;
font-weight: bold;
background-color: #c4c0c0;
text-align: left;
font-size: 10px;
border:1px solid rgb(114, 110, 110);
width:100%;
padding: 6px;
}
.tabela-down{
color: #FFFFFF;
font-weight: bold;
font-size: 12px;
text-align: center;
background-color: #707070;
border: 1px solid rgb(40 38 38);
width: 45%;
padding: 6px;
}
.tabela-description{
font-size: 12px;
text-align: center;
border: 1px solid rgb(114, 110, 110);
width: 45%;
padding: 6px;
}
<div id = "titulo">
<h1>LISTAGEM DE PENDÊNCIAS</h1>
</div>
<table style="border-collapse: collapse;width:100%;">
<tr>
<td class = "tabela-up-left">PROTOCOLO:</td>
<td class = "tabela-up-right" colspan="2">123</td>
</tr>
<tr>
<td class = "tabela-up-left">CÓDIGO DO LOTE:</td>
<td class = "tabela-up-right" colspan="2">7773</td>
</tr>
<tr>
<td class = "tabela-down">VÍNCULO</td>
<td class = "tabela-down">PÊNDENCIA</td>
<td class = "tabela-down">STATUS</td>
</tr>
<tr>
<td class = "tabela-description">Dados gerais</td>
<td class = "tabela-description">Instrumento de Titulação</td>
<td class = "tabela-description">Nenhum</td>
</tr>
<tr>
<td class = "tabela-description">Dados gerais</td>
<td class = "tabela-description">Instrumento de Titulação</td>
<td class = "tabela-description">Nenhum</td>
</tr>
<tr>
<td class = "tabela-description">Dados gerais</td>
<td class = "tabela-description">Instrumento de Titulação</td>
<td class = "tabela-description">Nenhum</td>
</tr>
<tr>
<td class = "tabela-up-left">PROTOCOLO:</td>
<td class = "tabela-up-right" colspan="2">123</td>
</tr>
<tr>
<td class = "tabela-up-left">CÓDIGO DO LOTE:</td>
<td class = "tabela-up-right" colspan="2">7773</td>
</tr>
<tr>
<td class = "tabela-down">VÍNCULO</td>
<td class = "tabela-down">PÊNDENCIA</td>
<td class = "tabela-down">STATUS</td>
</tr>
<tr>
<td class = "tabela-description">Dados gerais</td>
<td class = "tabela-description">Instrumento de Titulação</td>
<td class = "tabela-description">Nenhum</td>
</tr>
<tr>
<td class = "tabela-description">Dados gerais</td>
<td class = "tabela-description">Instrumento de Titulação</td>
<td class = "tabela-description">Nenhum</td>
</tr>
<tr>
<td class = "tabela-description">Dados gerais</td>
<td class = "tabela-description">Instrumento de Titulação</td>
<td class = "tabela-description">Nenhum</td>
</tr>
</table>
please comment if query, and this also working but i suggest use only one table if you want short code.