Criação de tabela flexível

[rikaschmitt 54]

Boa tarde,

 

Preciso de sugestões para criar uma tabela que seja flexível. Ou seja, ela tem uma largura fixa, e dentro dela o número de colunas varia e essas colunas precisam se "auto-ajustar" na largura da tabela, para que não sobre espaço ou fique estranho.

 

Pensei em utilizar %, mas mesmo assim, se o número de colunas for grande, o valor da % pode quebrar a linha da tabela.

 

Outra alternativa é por jQuery, fazendo uma verificação do número de colunas e atribuindo o valor da largura para cada um. Mais trabalhoso, eu acho.

 

E ai?

[Douglas Julião 34]

Man eu ja cheguei a usar uma tabela assim, quando trabalha com várias colunas é meio chatinho...

fica com esse código que eu usei, faz um teste ai:

<div class="tabela tabela2">
     <h2 class="title">Título</h2>
     <div class="separator"></div>
     <table cellpadding="0" cellspacing="0" border="1" class="tabela-widt">
          <thead>
               <tr>
                   <td class="head1 center">Status</td>
                   <td class="head0 center">Data</td>
                   <td class="head1 center">Tópico</td>
                   <td class="head0 center">Ação</td>
               </tr>
           </thead>
           <tbody>
               <tr>
                  <td class="center"><span class="icon-circle-blank"> </span></td>
                  <td class="center"></td>
                  <td></td>
                  <td class="center"><a href=""></a></td>
               </tr>
            </tbody>
      </table>

.tabela{
	width:100%;
}
.tabela table{
	border-radius:2px;
	border:1px solid #ccc;
	width:100%;
}
.tabela tbody tr:hover td{
	background: #d8e6fd;
}
.tabela thead tr, .tabela thead td{
	padding: 5px 8px;
	border-bottom:1px solid #ccc;
}
.tabela tbody tr, .tabela tbody td{
	padding: 8px 8px;
	border-bottom:1px solid #ccc;
}
.head0{
	background-color:#eee; 
}
.head1{
	background-color:#ddd;
}
.center {
        text-align: center;
}
.separator {
        position: relative;
        height: 3px;
        width: 100%;
        background: #dadada;
        border-bottom: solid 1px #fff;
        margin-bottom: 15px;
}

Só copia o código e ve se é o que você precisa :) boa sorte!

[rikaschmitt 54]

Cara, me ajudou muito!

Valeu!

 

único problema é que as <td> estão ficando grandes, mesmo que o conteúdo seja pequeno...

[Douglas Julião 34]

nesse caso crie uma classe com width específico para um determinado tipo de dado :).

no meu caso eu só usei nas primeiras <td> porque eu adicionava um checkbox, ai eu colocava o css inline mesmo:

<td style="width:50px !important">

[rikaschmitt 54]

Sim, tbm usei isso.

Muito obrigado \o