Problem with table width

3

Good people,

I have a table like this:

The"thead" part where it says Dorsal, Name ... etc is a table (table1) and the rest is another table (table2), basically they are two tables that I tried to do with them if they aligned using width but it does not work . What I wanted was that both table1 and table2 aligned, leaving their "partitions" in the purple scratches. Can anyone help me figure this out? I leave below the code maybe it is easier to understand (although the data are from the database I will get into it). Now if someone can tell me how I can hide the scrollbar but anyway I can scroll, I would thank

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. This is not what I did. I am an intern and have been asked to make changes.

    
asked by anonymous 12.06.2015 / 13:43

2 answers

2

First, you should not use two tables to do this. Use <thead></thead> to do the table header. And put the elements within 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 to have two tables, use the width attribute of the <td></td> tag to set the width.

    
12.06.2015 / 14:29
1

Hello,

I found a person who had exactly your problem:

Is it possible to add scroll-only overflow behavior in a table's tbody?

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

Example:

Inmyopinion,thebestsolutionwouldbetoimplementapluginthatalreadyoffersyouthesefeatures.

Tablesorterplugin:

link

DatatablePlugin:

link

    
12.06.2015 / 14:51