Tabela sem Table só com CSS

1. Tabela sem Table só com CSS

acharnobairro
(usa Ubuntu)

Enviado em 16/03/2016 - 23:45h

Fiz esta tabela só com CSS mas ela não é pratica para preenchimento com muitos registros, é de largura fixa (deveria se autoajustar). Testado no IE8, FF e Chome (ubuntu 10). Quem puder melhorar minha idéia inicial, será útil para alguem.

<html>
<head>
<title>Tabela só com CSS</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
margin-left: auto;
margin-right: auto;
}

body {
overflow:auto;
text-align: center;
}

#tabela {
width: 906px;
overflow: hidden;
border: 2px solid #FF0000;
-moz-border-radius:5px; /* canto arredondado no Firefox */
-webkit-border-radius:5px; /* canto arredondado no Google Chrome e Safari: -webkit- */
border-radius:5px; /* para quando o W3C valide os comandos CSS3. Funciona no IE9 */
}
#l1c1 {
width: 200px;
height: 100px;
position: relative;
float: left;
border-top: 0px solid #339900;
border-right: 2px solid #339900;
border-bottom: 2px solid #339900;
border-left: 0px solid #339900;
overflow: auto;
}

#l1c2 {
width: 350px;
height: 100px;
position: relative;
float: left;
border-top: 0px solid #339900;
border-right: 2px solid #339900;
border-bottom: 2px solid #339900;
border-left: 0px solid #339900;
overflow: auto;
}

.margem { margin: 30px; }
.limpa {clear: both;}
</style>
</head>
<body>
<br>
<p> Tabela sem TABLE, só com CSS.</p>
<div id="tabela">
<div id="l1c1">
<p style="text-align: center;"><b><br>
coluna 1</b></p>
<br>
</div>
<div id="l1c2">
<p align="center"><b>coluna 2</b></p>
</div>
<div id="l1c2">
<p align="center"><b>coluna 3</b></p>
</div>
<span class="limpa"></span>
<div id="l1c1">
<p class="margem"><b>linha 2</b><br>
Acrescentando mais linhas <br>
a ponto de expandir a célula da coluna 1, <br>
ela passa a ser referencia de tamanho para as colunas da direita. </p>
</div>
<div id="l1c2">
<p class="margem"><b>linha 2</b><br>
As linhas<br>
das molduras <br>
acompanham <br>
o tamanho da célula.<br>
</p>
</div>
<div id="l1c2">
<p class="margem"> <b> Linha 2 </b> <br>
A quantidade de linhas nas outras colunas <br>
deve ser igual a da primeira coluna <br>
para que todas as células tenham <br>
o mesmo tamanho. </p>
</div>
<span class="limpa"></span>
<div id="l1c1">
<p class="margem"> <b> Linha 3 </b></p>
</div>
<div id="l1c2">
<p class="margem"> <b> Coluna 2 </b></p>
</div>
<div id="l1c2">
<p class="margem"> <b> Coluna 3 </b></p>
</div>
<span class="limpa"></span>
<div id="l1c1"> <br>
<p class="margem">linha 4</p>
</div>
<div id="l1c2">
<p class="margem"> <b> Coluna 2 </b></p>
</div>
<div id="l1c2">
<p class="margem"> <b> Coluna 3 </b></p>
</div>
<span class="limpa"></span>
<div id="l1c1">
<p class="margem">linha 5</p>
</div>
<div id="l1c2">
<p class="margem"> <b> Coluna 2 </b></p>
</div>
<div id="l1c2">
<p class="margem"> <b> Coluna 3 </b></p>
</div>
<span class="limpa"></span>
<p align="center"><br>
Todas as tabelas estão com as pontas nas bordas. <br>
<br>
A tabela CSS está centrada na página do navegador IE8,
Firefox e no Chrome. <br>
</p>
</div>
</body>
</html>

0 0

Quote

2. Re: Tabela sem Table só com CSS

jpvr2005
(usa Debian)

Enviado em 17/03/2016 - 08:18h

Bom dia amigo,
Se vc precisa de uma tabela limpa, funcional e responsiva te sugiro usar o framework bootstrap (ele já tem um css que trata a table).
Conheça mais nesse link: http://getbootstrap.com/components/
No canto direito, procure em Panels >> With Tables

Att.
João Paulo

0 0

Quote