3

Boas pessoal,

Eu tenho uma tabela assim:

inserir a descrição da imagem aqui

A parte "thead" onde diz Dorsal,Nome... etc é uma tabela(tabela1) e o resto é outra tabela(tabela2), basicamente são duas tabelas que eu tentei fazer com elas se alinhassem usando width mas não funciona. O que eu queria era que tanto a tabela1 como a tabela2 se alinhassem ficando as sua "divisórias" nos riscos roxos. Alguém me pode ajudar a perceber isto? Deixo em baixo o código talvez seja mais fácil para entender(embora os dados sejam da base de dados vou meter na mesma). Já agora se alguém me conseguir dizer como posso esconder a scrollbar mas mesmo assim conseguir fazer scroll eu agradecia

echo "<div id='tabelaN'>
<div id='tabela1'>
	<table>
		<tr>
			<td>Dorsal</td>
			<td>Nome</td>
			<td>Equipa</td>
			<td>Prova</td>
			<td>Almoço</td>
		</tr>
	</table>
</div>";

echo "
<div style='width: 550px; height: 150px; overflow-y: scroll; overflow-x:hidden' id='tabela2'>
<table >";
while($row = mysqli_fetch_array($result)){
	echo "<tr >";
		echo "<td>" . $row['dorsal'] . "</td>";
		echo "<td>" . $row['nome'] . "</td>";
		echo "<td>" . $row['equipa'] . "</td>";
		echo "<td>" . $row['categoria'] . "</td>";
	if($row['almoco'] == 1)
		echo "<td>Sim</td>";
	else
		echo "<td>Não</td>";
	echo "</tr>";
}
echo "</table></div></div>";

PS. Isso não fui eu que fiz. Sou um estagiário e pediram-me para fazer alterações.

3
  • Deixe suas <td> com display block, adicione também uma width e acho que elas obedecerão. Se não me engano, por padrão, as tables vem com display table cell, elas se auto redimensionam de acordo com o conteúdo.
    – Caique C.
    Commented 12/06/2015 às 11:54
  • @CaiqueC. sabe como fazer com que scrollbar desapareça mas continuar a fazer scroll? Commented 12/06/2015 às 11:59
  • Não faça isso, e se a pessoa não tiver um mouse com scroll, ou no mínimo, não utilizá-lo? Como elá ira navegar por essa tabela? O que você pode fazer é alterar o estilo da barrinha.. colocá-la para fora, mudar o estilo... exemplo css-tricks.com/almanac/properties/s/scrollbar
    – Caique C.
    Commented 12/06/2015 às 12:03

2 Respostas 2

2

Primeiro, você não deveria usar duas tabelas para fazer isso. Use um <thead></thead> para fazer o cabeçalho da tabela. E coloque os elementos dentro da primeira <tr></tr> dentro de tags <th></th>.

Na segunda tabela use um <tbody></tbody> para indicar que é o corpo da tabela. Dessa forma o alinhamento será corrigido automaticamente pela tabela

Ex:

echo "<div id='tabelaN'>
    <table>
        <thead>
            <tr>
                <th>Dorsal</th>
                <th>Nome</th>
                <th>Equipa</th>
                <th>Prova</th>
                <th>Almoço</th>
            </tr>
        </thead>";
echo "<tbody>";
while($row = mysqli_fetch_array($result)){
    echo "<tr >";
        echo "<td>" . $row['dorsal'] . "</td>";
        echo "<td>" . $row['nome'] . "</td>";
        echo "<td>" . $row['equipa'] . "</td>";
        echo "<td>" . $row['categoria'] . "</td>";
    if($row['almoco'] == 1)
        echo "<td>Sim</td>";
    else
        echo "<td>Não</td>";
    echo "</tr>";
}
echo "</tbody></table></div>";

Mas se você realmente precisar que sejam duas tabelas, use o atributo width da tag <td></td> para para definir a largura.

2
  • Obrigado mas sera que posso dar id ao tbody e ao thead? Commented 15/06/2015 às 15:12
  • @BrunoGibellino sim, assim como a qualquer elemento html Commented 17/06/2015 às 3:37
1

Olá,

Encontrei uma pessoa que tinha exatamente o seu problema :

É possível adicionar um comportamento de overflow com scroll somente no tbody de uma table?

Porém a solução proposta não redimensiona o cabeçalho de acordo com o conteúdo da célula.

Exemplo :

inserir a descrição da imagem aqui

Na minha opinião a melhor solução seria você implementar um plugin que já disponibiliza pra você essas funcionalidades.

Plugin Tablesorter :

https://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html

inserir a descrição da imagem aqui

Plugin Datatable :

http://jquery-datatables-column-filter.googlecode.com/svn-history/r63/trunk/ScrollInfinite.html

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .