html5 单元格宽度,html table呈现个人简历以及单元格宽度失效的问题解决

正确的实现代码如下:

个人简历

个人简历

个人资料姓名婚姻照片出 生政治面貌性 别民 族学 位移动电话专 业电子邮件地址:教育背景2012.9 - 2014.9中国海洋大学本科特长及兴趣爱好篮球、足球、羽毛球、游泳、旅游计算机能力精通html div+css javascript jquery php linux外语水平通过英语专业四六,能熟练进行听说读写译

效果:

17fcad4a9aaa4c511d2ecd8bca1f796e.png

实现关键:

1)利用table的colspan和rowspan属性,进行单元格的合并。

2)table中使用了colspan后会导致列宽度失效。

因为一般表格都会定义一个table-layout: fixed;防止td被连串字符撑开,但是如果首行有合并单元格的话 td宽度定义就会失效。

最好的办法,在最上边加以下代码来控制td宽度

单位也可以用px,把这段代码放在 tr之前,或者tbody之前。

如果删除上面的控制代码,呈现效果就会如下:

75deb8efefd94c12708860aaf722116e.png

单元格的宽度变得不可预测。

到此这篇关于html table呈现个人简历以及单元格宽度失效的问题解决的文章就介绍到这了,更多相关html table单元格宽度失效内容请搜索萬仟网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持萬仟网!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在媒体查询中合并table单元格,可以使用CSS伪元素`:before`和`:after`来模拟单元格合并的效果。 首先,在HTML中给需要合并的单元格添加一个类名,例如`merge-cell`。然后,在CSS中使用媒体查询来针对不同的屏幕尺寸设置单元格的样式。 例如,以下代码将在屏幕宽度小于600px时将第一行的第一列和第二列合并成一个单元格: ```html <table> <tr> <th class="merge-cell">Header 1</th> <th class="merge-cell">Header 2</th> <th>Header 3</th> </tr> <tr> <td class="merge-cell">Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> ``` ```css @media screen and (max-width: 600px) { .merge-cell { position: relative; } .merge-cell:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; border-top: 1px solid #ccc; border-right: 1px solid #ccc; } .merge-cell:first-child:before { border-left: 1px solid #ccc; } .merge-cell:last-child:before { border-right: none; } } ``` 在上面的代码中,当屏幕宽度小于600px时,`.merge-cell`类的单元格将被设置为相对定位,同时添加一个`:before`伪元素来模拟合并后的单元格。`:before`元素的内容为空,宽度和高度都为100%来覆盖原来的单元格。同时,使用`z-index`属性将伪元素置于原单元格下方,使其不会遮挡其他单元格。 为了模拟合并后的单元格边框,使用`border`属性设置伪元素的边框样式。由于合并后的单元格需要显示原来单元格的左边框和上边框,所以需要添加`border-top`和`border-right`属性。同时,由于第一列的单元格需要显示左边框,所以需要添加`border-left`属性。最后,由于最后一列的单元格不需要显示右边框,所以需要将`border-right`属性设为`none`。 需要注意的是,当合并单元格时,原来的单元格的`colspan`和`rowspan`属性将失效,因此需要确保合并后的单元格中不含有任何其他单元格
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值