Heim >Web-Frontend >HTML-Tutorial >上下两个表格有相同列数,怎么使上下对其_html/css_WEB-ITnose

上下两个表格有相同列数,怎么使上下对其_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:15:011897Durchsuche

有两个表格,上表格是各列是标题,下表格是显示对应的数据,怎么使表格上下各列对其?


回复讨论(解决方案)

只要列数相同不就对齐了吗

只要列数相同不就对齐了吗
列数是相同的就是没有对其

哎  关键的忘说了下面table多了个下拉滚动条就不能对其了

放入一个table中去不可以吗

指定单元格宽度(注意不是百分比)

指定单元格宽度(注意不是百分比)
就是用的百分比,想在不同大小的浏览器里好看

哎 关键的忘说了下面table多了个下拉滚动条就不能对其了
就是不能在一个表格中啊!

引用 5 楼  的回复:
指定单元格宽度(注意不是百分比)

就是用的百分比,想在不同大小的浏览器里好看 那你就需要在上边的表格附加滚动条等宽的单元格

我把图片发上来那么看下?前面的列没有对其

[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的相册 > 默认相册
(0张)

第一个表格部分




这样就可临时解决问题,永久的解决需用 js
另外网上存在不少于10款的js grid 为什么不选一个用用呢


刚不知道怎么发图片

第一个表格部分




这样就可临时解决问题,永久的解决需用 js
另外网上存在不少于10款的js grid 为什么不选一个用用呢

还不会JS,希望给我一个JS代码。
应该学习JS了。

完全可以放到一个表格里

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

代码我改了下,不过没验证,你可以自己验证下,不过思路就是这样

哦,我明白你意思了,要首行固定吧,那我再想想

哦,我明白你意思了,要首行固定吧,那我再想想
一个表个就简单咯。
你会js不,看看

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:怎么通过简单js/css实现选中一行的时候,前面的单选框也被选中?_html/css_WEB-ITnoseNächster Artikel:关于让一整个<td>做成超链接的问题_html/css_WEB-ITnose

In Verbindung stehende Artikel

Mehr sehen