D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
var
/
www
/
html
/
crsys_ant
/
Filename :
tabelateste.php
back
Copy
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>Tabela Bootstrap 5.3</title> <!-- Bootstrap 5.3 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .tabela-limitada { max-width: 5cm; max-height: 3cm; font-size: 0.7rem; table-layout: fixed; } .tabela-limitada td, .tabela-limitada th { padding: 0; line-height: 1; text-align: center; vertical-align: middle; white-space: nowrap; } /* input percentual super compacto */ .perc-input { width: 100%; border: none; outline: none; font-size: 0.7rem; text-align: center; padding: 0; line-height: 1; background: transparent; } /* remove setinhas do input number */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* alinha à esquerda apenas a coluna Tipo no corpo da tabela */ .tabela-limitada tbody td:first-child { text-align: left; padding-left: 2px; } </style> </head> <body class="p-3"> <table class="table table-bordered tabela-limitada"> <thead> <tr> <th>Tipo</th> <th>Perc.</th> <th>ID</th> </tr> </thead> <tbody> <tr> <td>Medição</td> <td> <input type="number" class="perc-input" value="50"> </td> <td>1</td> </tr> <tr> <td>Entrega</td> <td> <input type="number" class="perc-input" value="8"> </td> <td>2</td> </tr> <tr> <td>Colocação</td> <td> <input type="number" class="perc-input" value="11"> </td> <td>3</td> </tr> <tr> <td>Saldo</td> <td> <input type="number" class="perc-input" value="15"> </td> <td>4</td> </tr> </tbody> </table> </body> </html>