Problem with table width

Question

Good staff,

I have a table like this:

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.

Answer 1

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.

Answer 2

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 :

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

Datatable Plugin :

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