要做出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复选框为单选功能