61,124
社区成员
发帖
与我相关
我的任务
分享表格的css 怎么修改
<table border="1" style="width:100%">
<tr>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
</tr>
<tr>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
</tr>
<tr>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
</tr>
</table>
怎么把一个<table>的样式变成如下图的？？？？
就是把第二行的最后一格拉宽，
本人菜鸟一个，请求大神帮助
...全文
请发表友善的回复…
发表回复
waqxy 2017-03-11
- 打赏
- 举报
可以用table嵌套（但是贼麻烦）
<table border="1" style="width:100%">
<tr>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
</tr>
<tr>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td colspan="2" style="border: none;padding: 0;" id="container">
<table id="tbLeft" style="width:20%;float: left;border: 1px solid;margin-right: 2px;">
<td>aaaaaa</td>
</table>
<table id="tbRight" style="border: 1px solid;">
<td>aaaaaa</td>
</table>
</td>
</tr>
<tr>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
</tr>
</table>
<script>
(function(){
var width=document.getElementById('container').clientWidth; //获取嵌套有两个table的td的宽
var leftWidth=document.getElementById('tbLeft').offsetWidth; //获取左边的table的宽
var rightWidth=(width-leftWidth-2)/width; //计算右边的table的宽的比例，减2是因为td的间距是2px
document.getElementById('tbRight').style.width=(rightWidth*100)+ '%';
})()
</script>
我爱娃哈哈 2017-03-11
- 打赏
- 举报
用个colspan合并一下就行了
理太偏 2017-03-10
- 打赏
- 举报
<table border="1" style="width:100%">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<tr>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td colspan="2">aaaaaa</td>
<td>aaaaaa</td>
</tr>
<tr>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td colspan="2">aaaaaa</td>
</tr>
<tr>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td colspan="2">aaaaaa</td>
<td>aaaaaa</td>
</tr>
<style type="text/css">
th:nth-child(4){
width:80px;
}
th{
visibility:hidden
}
</style>
qq_37849481 2017-03-10
- 打赏
- 举报
你可以直接在DW里拉第二行 最后那一个了
罗汉松驻扎的工作基地 2017-03-10
- 打赏
- 举报
大侠，效果还是不行啊。。。我用你的代码，效果如下：
理太偏 2017-03-10
- 打赏
- 举报
<table border="1" style="width:100%">
<tr>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td colspan="2">aaaaaa</td>
<td>aaaaaa</td>
</tr>
<tr>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td colspan="2">aaaaaa</td>
</tr>
<tr>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td colspan="2">aaaaaa</td>
<td>aaaaaa</td>
</tr>
</table>
