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

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>

Copy after login

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

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

The first table section

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

< table border="1px" cellpadding="0" cellspacing="0" width="100%" height=24>

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>

Copy after login

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>

Copy after login

Related labels：

上下两个表格有相同列数，怎么使上下对其

source：php.cn

Previous article：How to use simple js/css to achieve that when a row is selected, the previous radio button is also selected? _html/css_WEB-ITnose Next article：Regarding the problem of making an entire

a hyperlink_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

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

Reply to discussion (solution)