table{
border-collapse: collapse
border-spacing: 0
table-layout: fixed
}
</style>
<table>
<tr>
<td width="100">怎么样让一行中每个td所占的宽度都是一样的？无论字数是多少宽度都不会随之改变的那种。应该怎么弄？</td>
<td width="100">怎么样让一行中每个td所占的宽度都是一样的？无论字数是多少宽度都不会随之改变的那种。应该怎么弄？</td>
<td width="100">怎么样让一行中每个td所占的宽度都是一样的？无论字数是多少宽度都不会随之改变的那种。应该怎么弄？</td>
</tr>
</table>
就是这样子，关键在table-layout: fixed
<html><head>
<title>平分秋色</title>
<style type="text/css">
.div1
{
width:90px
float:left
}
.div2
{
width:80px
float:left
}
div
{
border:1px solid #EEEEEE
}
</style>
<script type="text/javascript">
window.onload = function () {
rePointAll()
}
function rePointAll() {
rePoint("objElement", 0)
rePoint("objElement2", 0)
rePoint("objElement3", 90)//指定每个DIV的宽度
rePoint("td1", 0)
rePoint("td2", 80)//CSS样式指定的属性.style.width无法获取，所以要指定宽度
}
//指定间距，id:容器标签ID，w为间距、为0时取第一个元素的宽度值
function rePoint(id, w) {
var objElement = document.getElementById(id)//获取容器
var divs = objElement.getElementsByTagName("div")//获取其下元素
if (divs.length == 0) {//没有元素则结束
return
}
var width = w
if (width == 0) {//如果不指定元素宽度，去第一个元素宽度
//获取宽度，并正则去掉"px"，不区分大小写，兼容措施
width = divs[0].style.width.replace(/px/i, "")
}
//间距 = (容器宽度 - 元素宽度 * 元素数量) / (元素数量 - 1)
var marginLeftIndex = parseInt((objElement.offsetWidth - (parseInt(width) * divs.length)) / (divs.length - 1))
if (marginLeftIndex <0) { //间距小于0时，则为0，
marginLeftIndex = 0
}
//循环为元素设定marginLeft(左间隔)，n = 1，不为0是略过第一个元素
for (var n = 1n <divs.lengthn++) {
divs[n].style.marginLeft = marginLeftIndex + "px"//+px 为兼容
}
}
</script>
</head>
<body>
<div id="objElement" style="width:100%">
<div style="width:100pxfloat:left">1</div><div style="width:100pxfloat:left">1</div><div style="width:100pxfloat:left">1</div><div style="width:100pxfloat:left">1</div><div style="width:100pxfloat:left">1</div>
</div>
<br/>
<div id="objElement2" style="width:100%">
<div style="width:120pxfloat:left">2</div><div style="width:120pxfloat:left">2</div><div style="width:120pxfloat:left">2</div><div style="width:120pxfloat:left">2</div>
</div>
<br/>
<div id="objElement3" style="width:100%">
<div class="div1">3</div><div class="div1">3</div><div class="div1">3</div><div class="div1">3</div><div class="div1">3</div><div class="div1">3</div>
</div>
<br/>
<table width="100%">
<tr><td id="td1"><div style="width:110pxfloat:left">4</div><div style="width:110pxfloat:left">4</div><div style="width:110pxfloat:left">4</div><div style="width:110pxfloat:left">4</div></td></tr>
<tr><td id="td2"><div class="div2">5</div><div class="div2">5</div><div class="div2">5</div><div class="div2">5</div><div class="div2">5</div><div class="div2">5</div></td></tr>
</table>
</body>
</html>
比如第一行3列均分，第二行二列均分，就找第一行列数和第二行列数的最小公倍数，如以下这个，最小公倍数就是标题跨列数：6，第一行每一单元格跨列2 第二行跨列3，刚好。
<table class="m-pnjctable">
<tr>
<td colspan="6">我是一个标题</td>
</tr>
<tr>
<th colspan="2">我是第一行第一列</th>
<th colspan="2">我是第一行第二列</th>
<th colspan="2">我是第一行第三列</th>
</tr>
<tr>
<th colspan="3">我是第二行第一列</th>
<th colspan="3">我是第二行第二列</th>
</tr>
</table>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）