制作精美H5输入表格页面

问题遇到的现象和发生背景

想要做一个可以用输入的表格，谢谢各位大深

问题相关代码，请勿粘贴截图

HTML文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="OrdersAdd.css" type="text/css">
</head>
<body>
<form action="OrdersAdd" method="post">
<!-- - <h3>垂直表头</h3>-->
      <table border="1">
      <caption><h1>订单详细信息</h1></caption>
         <tr>
            <th>订单编号：</th>
            <td><input type="text" required="required" name="id" id="id" ></td>
         </tr>
         <tr>
            <th>支付状态：</th>
            <td><input type="text" required="required" name="paystate" id="paystate"></td>
         </tr>
         <tr>
            <th>收件人    ：</th>
            <td><input type="text" required="required" name="receiverName" id="receiverName"></td>
         </tr>
         <tr>
            <th>联系电话：</th>
            <td><input type="text" required="required" name="receiverPhone" id="receiverPhone"></td>
         </tr>
         <tr>
            <th>收货地址：</th>
            <td><input type="text" required="required" name="receiverAddresse" id="receiverName" ></td>
         </tr>
         <tr>
            <th>总       价 ：
            <td><input type="text" required="required" name="money" id="money"></th></td>
         </tr>
         <tr>
            <th>下单时间：</th>
            <td><input contentEditable="true" type="text" required="required" name="ordertime" id="ordertime" ></td>
         </tr>
      </table>
<input type="submit" value="确定" class="button"/>
<input type="reset" value="重置" class="button"/>
</form>
</body>
</html>

CSS样式

@CHARSET "UTF-8";
td.input{
        border: none;
        overflow: hidden;
        height: 100%;
        width: 100%;
    } 
table{
    width: 100%;
    border-collapse: seperate;
}

table caption{
    font-size: 2em;
    font-weight: bold;
    margin: 1em 0;
}

th,td{
    border: 1px solid #999;
    text-align: center;
    padding: 20px 0;
}

table thead tr{
    background-color: #008c8c;
    color: #fff;
}

table tbody tr:nth-child(odd){
    background-color: #eee;
}

table tbody tr:hover{
    background-color: #ccc;
}

table tbody tr td:first-child{
    color: #f40;
}

table tfoot tr td{
    text-align: right;
    padding-right: 20px;
}
运行结果及报错内容

img

我的解答思路和尝试过的方法
我想要达到的结果

隐蔽输入框，可以输入到表格当中

订单详细信息不应该是用户输入信息后，通过js获取输入内容，然后添加到表格里去的吗？如果你硬要做输入样式，那就把input的高度调高点，设个固定值,把boder设为none