The upper and lower tables have the same number of columns, how to align them_html/css_WEB-ITnose

There are two tables. The upper table has each column as a title, and the lower table displays the corresponding data. How to align the upper and lower columns of the table?

Reply to discussion (solution)

As long as the number of columns is the same, isn’t it aligned?

As long as the number of columns is the same, isn’t it?
Number of columns They are the same, but they are not aligned

Hey, the key thing is that I forgot to mention that if the table below has an extra drop-down scroll bar, it cannot be aligned

Can't it be put into a table?

Specify the cell width (note that it is not a percentage)

Specify the cell width (note that it is not a percentage)
Just use the percentage. I want it to look good in browsers of different sizes

Hey, the key thing I forgot to mention is that if there is an extra drop-down scroll bar in the table below, it cannot be aligned
It just cannot be in the same table!

Quote from 5th floor’s reply:
Specify the cell width (note that it is not a percentage)

It is the percentage used. If you want it to look good in browsers of different sizes, you need to go above The table is attached with scroll bars and equal-width cells

I uploaded the picture so you can take a look? The previous column does not have

[img=http://xiangce.baidu.com/picture/album/list/3c85e96b5077a2d65f956707600fedff7f9312e1][/img]

<div height="23px" style="overflow: hidden;"><table border="1px" cellpadding="0" cellspacing="0"   width="100%"><tbody>  <tr class="tr" align="center" cols="5">  <td width="20%">姓名</td>  <td width="20%">性别</td>  <td width="20%">民族</td>  <td width="20%">号码</td>  <td width="20%">操作</td>  </tr></tbody></table></div><div  style="overflow: auto;height:230px;" ><table border="1px" cellpadding="0" cellspacing="0"   width="100%"><tbody>  <?php	  $sql="select * from `test`";	  $sqln=mysql_query($sql);	  while($row = mysql_fetch_array($sqln)){  ?>  <tr class="tr1" align="center" cols="5">  <td width="20%"><?php echo $row[name];?></td>  <td width="20%"><?php echo $row[sex];?></td>  <td width="20%"><?php echo $row[nation];?></td>  <td width="20%"><?php echo $row[number];?></td>  <td width="20%">操作</td>  </tr>  <?php	  }  ?></tbody></table></div>

[ img=http://xiangce.baidu.com/picture/album/list/3c85e96b5077a2d65f956707600fedff7f9312e1][/img]

xdw250701181's photo album > Default photo album
(0 photos)

The first table section
8cc95ca45761e725a108f5ee702b2932
c6227679276bbc63d5deb116ac1eb65f

This can temporarily solve the problem. The permanent solution requires js
In addition, there are no less than 10 js grids on the Internet. Why not choose one and use it

I just don’t know how to post pictures

The first table part
8cc95ca45761e725a108f5ee702b2932
d439186d9d9452b4e7f3b85e5caf2421

This can temporarily solve the problem, and the permanent solution requires js
In addition, online There are no less than 10 types of js grid. Why not choose one to use?

I don’t know JS yet. I hope you can give me a JS code.
It’s time to learn JS.

It can be put into a table

<div height="23px" style="overflow: hidden;"><table border="1px" cellpadding="0" cellspacing="0"   width="100%"><thead>  <tr class="tr" align="center" cols="5">  <td width="20%">姓名</td>  <td width="20%">性别</td>  <td width="20%">民族</td>  <td width="20%">号码</td>  <td width="20%">操作</td>  </tr></thead><tbody>  <?php      $sql="select * from `test`";      $sqln=mysql_query($sql);      while($row = mysql_fetch_array($sqln)){  ?>  <tr class="tr1" align="center" cols="5">  <td width="20%"><?php echo $row[name];?></td>  <td width="20%"><?php echo $row[sex];?></td>  <td width="20%"><?php echo $row[nation];?></td>  <td width="20%"><?php echo $row[number];?></td>  <td width="20%">操作</td>  </tr>  <?php      }  ?></tbody></table></div>

I changed the code, but it has not been verified. You can verify it yourself, but the idea is like this

Oh, I understand what you mean. If you want the first line to be fixed, then I’ll think about it again

Oh, I understand what you mean. If you want the first line to be fixed, then I’ll think about it again
One table at a time is simple Yes.
Do you know js? Take a look

 <script>				window.onload = function() {										                    										 var oDiv = document.getElementById("tr_showContent_0"); 					 document.getElementById("table0").width=oDiv.scrollWidth;  					 //alert(document.getElementById("table0").scrollWidth);//993					//alert(document.getElementById("table1").scrollWidth);//994					//alert(document.getElementById("tr_showContent_0").scrollWidth);//993					document.getElementById("td1").width=oDiv.children[0].scrollWidth; 					document.getElementById("td2").width=oDiv.children[1].scrollWidth; 					document.getElementById("td3").width=oDiv.children[2].scrollWidth; 					document.getElementById("td4").width=oDiv.children[3].scrollWidth; 					document.getElementById("td5").width=oDiv.children[4].scrollWidth; 										document.getElementById("td7").width=oDiv.children[6].scrollWidth; 					document.getElementById("td8").width=oDiv.children[7].scrollWidth; 					document.getElementById("td10").width=oDiv.children[9].scrollWidth; 										oDiv.children[0].width=oDiv.children[0].scrollWidth; 					oDiv.children[1].width=oDiv.children[1].scrollWidth; 					oDiv.children[2].width=oDiv.children[2].scrollWidth; 					oDiv.children[3].width=oDiv.children[3].scrollWidth; 					oDiv.children[4].width=oDiv.children[4].scrollWidth; 					oDiv.children[6].width=oDiv.children[6].scrollWidth; 					oDiv.children[7].width=oDiv.children[7].scrollWidth; 					oDiv.children[9].width=oDiv.children[9].scrollWidth; 										                }</script>