js设置两个table中的td的宽度

最新推荐文章于 2023-12-11 15:24:24 发布
最新推荐文章于 2023-12-11 15:24:24 发布
阅读量6.8k 收藏
点赞数
文章标签： table border xhtml html 文档 div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshiu78/article/details/7221830
版权

1.没加js的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tableHead">
  <tr>
    <th>序号</th>
    <th>名称</th>
    <th>性别</th>
    <th>年龄</th>
    <th>工资</th>
  </tr>
  </table>
  <table width="100%" border="1" cellspacing="0" cellpadding="0" id="tableHead">
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>男</td>
    <td>24</td>
    <td>5500</td>
  </tr>
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>男</td>
    <td>24</td>
    <td>5500</td>
  </tr>
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>男</td>
    <td>24</td>
    <td>5500</td>
  </tr>
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>男</td>
    <td>24</td>
    <td>5500</td>
  </tr>
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>男</td>
    <td>24</td>
    <td>5500</td>
  </tr>
</table>

</body>
</html>
2.加js的效果 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script>
		
	function DataToHead(){
		var headTab=document.getElementById("tableHead");
		var dataTab=document.getElementById("tableData");
		var headCols = headTab.getElementsByTagName('th');
		
		for(var i=0;i<headCols.length-1;i++){
		headCols[i].style.width = dataTab.rows[0].cells[i].offsetWidth-2;  
		}
	}
</script>
<body οnlοad="DataToHead();">
<div style="width:960px; overflow-x:auto;">
<table width="1024px" border="1" cellspacing="0" cellpadding="0" id="tableHead">
  <tr>
    <th>序号</th>
    <th>名称</th>
    <th>性别</th>
    <th>年龄</th>
    <th>工资</th>
	<th ></th>
  </tr>
  </table>
  <div style=" height:100px; overflow-y:auto;">
  <table width="100%" border="1" cellspacing="0" cellpadding="0" id="tableData">
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>男</td>
    <td>24</td>
    <td>5500</td>
  </tr>
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>男</td>
    <td>24</td>
    <td>5500</td>
  </tr>
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>男</td>
    <td>24</td>
    <td>5500</td>
  </tr>
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>男</td>
    <td>24</td>
    <td>5500</td>
  </tr>
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>男</td>
    <td>24</td>
    <td>5500</td>
  </tr>
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>男</td>
    <td>24</td>
    <td>5500</td>
  </tr>
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>男</td>
    <td>24</td>
    <td>5500</td>
  </tr>
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>男</td>
    <td>24</td>
    <td>5500</td>
  </tr>
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>男</td>
    <td>24</td>
    <td>5500</td>
  </tr>
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>男</td>
    <td>24</td>
    <td>5500</td>
  </tr>
  
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>男</td>
    <td>24</td>
    <td>5500</td>
  </tr>
</table>
</div>
</div>
</body>
</html>



woshiu78
关注
javascript控制Table的TD宽度１
TheoGo的专栏
06-26 4983
 var closed = false; function onOff() {  if (closed )  //需要显示菜单时触发  {  alert("开");   closed = false;   //window.document.getElementById("hide").style.visibility=hidden;   //window.document.getElemen
用js实现鼠标拖动控制td宽度
天涯 书塾
09-12 5694
 Untitled Documentvar dragenable=false;var x;var y;var w;var h;var obj;function init() {x=event.clientX+document.body.scrollLeft;obj=event.srcElement;w=event.srcElement.offsetWidth;obj.setCapture();
td的宽度设置
MelodyFreedom的博客
05-31 1235
1、td的宽度和换行的问题。 标题： 内容 2、table的行行之间的间距
动态改变table列宽，通过js设置table下td的宽度不起作用的解决办法
weixin_30443731的博客
04-19 2555
设置table下td的宽度，居然不起作用，后来才发现是table设置了table-layer:fixed！ 参照https://blog.csdn.net/xie_xiansheng/article/details/73249997的解决办法， <style> td{border:1px solid red;} </style> <t...
JS table td 设置宽度无反应（字符串每10个字符强制换行）
秋风伴落叶
04-10 458
table td 添加宽度无反应，每10个字符强制换行
实现boostrap表格td宽度可自由拖动。
07-28
1. **引入依赖**：确保在项目中引入Bootstrap CSS和jQuery库，因为`jquery-resizable-columns`依赖于这两个库。在HTML文件中添加如下链接： ```html ...
ie8,chrome中table的宽度固定方法
09-22
例如，你可以为每个表头单元格和对应数据单元格定义相同的类，然后在类中设置宽度。 除此之外，还可以考虑以下方法： 3. **使用媒体查询（Media Queries）**：通过CSS媒体查询，你可以针对不同的屏幕尺寸或浏览器...
javascript实现切换td中的值
10-25
具体到实现代码，首先创建了表格（table）元素，并设置了表格的边框（border）和宽度（width）。然后创建按钮，并将其innerHTML设置为"切换"。按钮的点击事件（onclick）被绑定到qiehuan函数上。通过循环创建了两行...
javascript 使td内容不换行不撑开
12-13
在网页设计中，有时我们需要确保表格（`<table>`）中的单元格（`<td>`）内容不换行且不撑开单元格的宽度。这通常发生在显示长字符串或者需要控制表格布局的情况下。标题和描述中提到的问题是关于如何利用CSS来实现这...
两个table实现固定表头拖动时仅限表体移动
09-25
标题“两个table实现固定表头拖动时仅限表体移动”描述了一种利用两个表格来完成这一功能的技术。这个方法的关键在于将表头和表体分开，然后通过CSS定位来实现滚动行为的控制。 首先，我们需要理解这种方法的基本...
JS 调整表格宽度
weixin_30905981的博客
03-11 1641
<html> <head> <title></title> <style> td {border-bottom:1px solid Black; border-left:1px solid Black} .title {border-left:1px solid #FFFFFF; border-top:1px solid #FF...
table单元格宽度一致_用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例...
weixin_39586915的博客
12-24 863
先上效果图：CSS:body{margin:0px;padding:0px;-moz-user-select:none;cursor:default;}.tabEditDiv{position:absolute;width:15px;height:15px;cursor:pointer;}.seltab{position:absolute;width:15px;height:15px;cursor...
两个table的td拖拽
雩风季白的博客
07-20 305
业务背景为 table布局模板的页面开发
奇葩的table里<th>和<td>不等宽问题
1Ro
07-04 6319
近日遇到一个对我来说十分奇葩的问题，
table样式测试总结tr td宽度分析
aic25820的博客
02-27 1306
题外话：一直以来习惯布局用ul,li样式调整比较方便，不会互相影响出现一些问题，but~现在公司涉及很多表格打印，都是用table写的，好多宽度高度合并啊，组合啊~~~，单元格之间互相影响，有的样式设置还不起作用。。。。。脑瓜疼啊！脑瓜疼~~~废话说了一堆，撸起袖子继续干吧！ 首先定义一个基础的table <style> table tr td{ ba...
table表格table/tr/td宽度和高度的设置
最新发布
我真的睡不够
12-11 6002
再看看td的height设置吧，各个td的height要看这个td所在的⾏的最⼤⾼度来确定这⼀⾏的每个td的height，然后各个⾏的⾼度情况和tr中。当⼏个tr都设置了height的具体数值时，各个tr的height按照设置的值的⽐例来分配总的height值，注意这⾥说的是总的height值。当有的tr设置了具体的数值，有的没有设置具体的数值为默认时，先保证各个tr的基本需要，剩下的再满⾜设置了具体值的tr，之后再全部给。置的值⼤就按照哪个，如果⼀个设置了值⼀个没有设置值，那么按照设置值的算。
html指定td大小,使用javascript调整html表TD的大小
weixin_33646989的博客
06-07 528
我有这个HTML表：blablablablublublublublublu这是我的js脚本：var MinSize=0;var _startPosition = 0;var _diffPosition = 0;var _allowMove = false;var _resizerColumn = null;var _firstColumn = null;var _secondColumn = ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值