Problem with table width

Asked

Viewed 637 times

3

Good staff,

I have a table like this:

inserir a descrição da imagem aqui

The "thead" part where it says Dorsal,Name... etc is a table(Tabela1) and the rest is another table(table2), basically are two tables that I tried to make them align using width but it doesn’t work. What I wanted was for both Table 1 and table2 to align themselves by getting their "dividers" in the purple stripes. Can someone help me figure this out? I leave the code down maybe it is easier to understand(although the data are from the database I will put in it). By the way if anyone can tell me how to hide the scrollbar but still manage to scroll I would appreciate

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>";

P.S. That’s not what I did. I’m an intern and I’ve been asked to make changes.

  • Leave your <td> with display block, add a width and I think they will obey. If I’m not mistaken, by default Tables come with display table Cell, they resize themselves according to content.

  • @Caiquec. knows how to make scrollbar disappear but continue to scroll?

  • Don’t do that, and if you don’t have a scrolled mouse, or at least don’t use it? How do you navigate this table? What you can do is change the style of the bar.. put it out, change the style... example https://css-tricks.com/almanac/properties/s/scrollbar/

2 answers

2


First, you shouldn’t use two tables to do this. Use one <thead></thead> to make the table header. And place the elements inside the first <tr></tr> within tags <th></th>.

In the second table use a <tbody></tbody> to indicate that it is the body of the table. This way the alignment will be corrected automatically by the table

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>";

But if you really need two tables, use the attribute width tag <td></td> to set the width.

  • Thanks but will be able to give id to tbody and thead?

  • @Brunogibellino yes, as well as any html element

1

Hello,

I met someone who had exactly your problem :

It is possible to add an overflow behavior with scroll only in tbody of a table?

But the proposed solution does not resize the header according to cell content.

Example :

inserir a descrição da imagem aqui

In my opinion the best solution would be you implement a plugin that already makes available to you these features.

Plugin Tablesorter :

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

inserir a descrição da imagem aqui

Datatable Plugin :

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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.