html解决table设置宽度无效的问题
html解决table设置宽度无效的问题
这篇文章主要介绍了html解决table设置宽度无效的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
如果对table设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效。
解决方法:
在tbody前面加
1 2 3 4 5 | < col style = "width: 100px;" /> < col > < col style = "width: 100px;" /> < col style = "width: 100px;" /> < col style = "width: 100px;" /> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .detail { padding-bottom : 50px ; margin-top : 80px ; } .detail_table { table-layout : fixed ; /*列宽由表格宽度和列宽度设定。*/ margin : auto ; /*table居中*/ text-align : center ; border : 1px solid #804040 ; border-collapse : collapse ; } .detail_table th { padding : 26px ;; } .detail_table td { border : 1px solid #804040 ; padding-top : 16px ; padding-bottom : 16px ; } .special { text-align : left ; padding-left : 20px ; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | < div class = "detail" > < table class = "detail_table" > < thead > < th colspan = "5" >选择的选项明细</ th > </ thead > <!--写的话就按照你写的宽度,但是如果你写的宽度占不满table它会按照你给的尺寸的比例平分至每个td--> <!--现在这么写就是四列是100px,没给数据的那一列占剩下的全部--> < col style = "width: 100px;" /> < col > < col style = "width: 100px;" /> < col style = "width: 100px;" /> < col style = "width: 100px;" /> < tbody > < tr > < td > 序号 </ td > < td > 症状 </ td > < td > 符合 </ td > < td > 不符合 </ td > < td > 不确定 </ td > </ tr > <? php $ i = 1 ; ?> <? php foreach ($test as $item): ?> <!--拿到选择项--> <? php $temp = $this->session->userdata('b' . $i) ?> < tr > < td > <? php echo $i; ?> </ td > < td > <? php echo $item; ?> </ td > < td > <? php if ($temp == 1): ?>√<? php endif ?> </ td > < td > <? php if ($temp == 2): ?>√<? php endif ?> </ td > < td > <? php if ($temp == 3): ?>√<? php endif ?> </ td > </ tr > <? php $i++; ?> <? php endforeach; ?> </ tbody > </ table > </ div > |
到此这篇关于html解决table设置宽度无效的问题的文章就介绍到这了