Tabela din�mica e interativa.

27/04/2023

Boa noite!
Pessoal se algu�m pode me ajudar eu agradeceria...
Gostaria de fazer uma tabela din�mica, onde o usu�rio pegasse uma coluna e pudesse move-la para qualquer lado da tabela, esse c�digo � html e css

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabela</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="table-container">
<h1 class="cabecalho">Tabela </h1>

<table class="table">
<thead>
<tr>
<th>Loja</th>
<th>Local</th>
<th>Data Venda</th>
<th>Descri��o</th>
<th>Quantidade</th>
<th>Valor</th>
<th>Status</th>
<th>Baixar</th>

</tr>
</thead>
<tbody>
<tr>
<td table-label="Loja">01</td>
<td table-label="Local">Idefonso Albano</td>
<td table-label="Data venda">26 jan 2023</td>
<td table-label="Descri��o">#####</td>
<td table-label="Quantidade">1000</td>
<td table-label="Valor">15000</td>
<td table-label="Status"> <span class="text-open">[ Ok ]</span></td>
<td table-label=""><a href="#" class="btn">Download</a></td>
</tr>
<tr>
<td table-label="Loja">02</td>
<td table-label="Local">Idefonso Albano</td>
<td table-label="Data venda">26 jan 2023</td>
<td table-label="Descri��o">#####</td>
<td table-label="Quantidade">1000</td>
<td table-label="Valor">15000</td>
<td table-label="Status"> <span class="text-open">[ OK ]</span></td>
<td table-label=""><a href="#" class="btn">Download</a></td>
</tr>
<tr>
<td table-label="Loja">03</td>
<td table-label="Local">Idefonso Albano</td>
<td table-label="Data venda">26 jan 2023</td>
<td table-label="Descri��o">#####</td>
<td table-label="Quantidade">1000</td>
<td table-label="Valor">15000</td>
<td table-label="Status"> <span class="text-open">[ OK ]</span></td>
<td table-label=""><a href="#" class="btn">Download</a></td>
</tr>
<tr>
<td table-label="Loja">04</td>
<td table-label="Local">Idefonso Albano</td>
<td table-label="Data venda">26 jan 2023</td>
<td table-label="Descri��o">#####</td>
<td table-label="Quantidade">1000</td>
<td table-label="Valor">15000</td>
<td table-label="Status"> <span class="text-open">[ OK ]</span></td>
<td table-label=""><a href="#" class="btn">Download</a></td>
</tr>
<tr>
<td table-label="Loja">05</td>
<td table-label="Local">Idefonso Albano</td>
<td table-label="Data venda">26 jan 2023</td>
<td table-label="Descri��o">#####</td>
<td table-label="Quantidade">1000</td>
<td table-label="Valor">15000</td>
<td table-label="Status"> <span class="text-open">[ Ok ]</span></td>
<td table-label=""><a href="#" class="btn">Download</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: #32312f;
font-family: sans-serif;
}

.table-container {
padding: 0 10%;
margin: 40px auto 0;
}

.cabecalho {
font-size: 40px;
text-align: center;
color: #f1f1f1;
margin-bottom: 40px;
}

.table {
width: 100%;
border-collapse: collapse;
/* text-align: center; */
}

.table thead {
background-color: #ee2828;
}

.table thead tr th {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.35px;
color: #ffffff;
opacity: 1;
padding: 12px;
vertical-align: top;
border: 1px solid #dee2e685;
}

.table tbody tr td {
font-size: 14px;
letter-spacing: 0.35px;
font-weight: normal;
color: #f1f1f1f1;
background-color: #3c3f44;
padding: 8px;
text-align: center;
border: 1px solid #dee2e685;
}

.table .text-open {
font-size: 14px;
font-weight: bold;
letter-spacing: 0.35px;
color: #ff1046;
}

.table tbody tr td .btn {
width: 130px;
text-decoration: none;
line-height: 35px;
display: inline-block;
background-color: #ff1046;
font-weight: medium;
color: #ffffff;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
font-size: 14px;
opacity: 1;

}

@media (max-width: 768px){
.table thead {
display: none;
}

.table, .table tbody, .table tr, .table td {
display: block;
width: 100%;
}

.table tr {
margin-bottom: 15px
}

.table tbody tr td {
text-align: right;
padding-left: 50%;
position: relative;
}

.table td::before {
content: attr(table-label);
position: absolute;
left: 0;
width: 50%;
padding-left: 15px;
font-weight: 600;
font-size: 14px;
text-align: left;
}
}

Werik Alves

Curtir t�pico + 0

Responder