100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 如何用 html 做出 word 表格的效果

如何用 html 做出 word 表格的效果

时间:2022-01-06 05:55:46

相关推荐

如何用 html 做出 word 表格的效果

要做出word表格的效果,其实主要就在文本输入框这么处理的问题,如果把文本输入框不加边框并且整个单元格都可以点击就行,还要兼顾web端和手机端浏览器的效果。为此,可以使用如下样式:

.myInput{width: 100%;height: 100%;border: none;float: left;zoom:1;outline: medium;}.myInput1{width: 40px;border: none;zoom:1;outline: medium;}.btn{margin:0 auto;width: 80%;}table {border: 1px solid #ccc;width: 80%;margin:0;padding:0;border-collapse: collapse;border-spacing: 0;margin: 0 auto;}table tr {border: 1px solid #ddd;padding: 5px;}table th, table td {padding: 10px;text-align: center;}@media screen and (max-width: 600px) {table {border: 0;}table thead {display: none;}table tr {margin-bottom: 10px;display: block;border-bottom: 2px solid #ddd;}table td {display: block;text-align: right;font-size: 13px;border-bottom: 1px dotted #ccc;}table td:last-child {border-bottom: 0;}table td:before {content: attr(data-label);float: left;text-transform: uppercase;font-weight: bold;}}.note{max-width: 80%; margin: 0 auto;}

myInput:为了table的单个单元格的全部区域都能输入,加的样式,类似于下图这样:

myInput1:为了部分区域的样式,像下面这样中间可以填充内容的

最终效果如下:

里面的是否复选框按钮 作为单选框用的时候,可以参考:HTML中把input check复选框为单选功能

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。