如何用 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复选框为单选功能