一个html就可以的那种
类似于下面这种的,特别简单的,看上去就像一个表格一样的这种

1. 使用前台框架就行了,比如easyui得dataGrid等,如果你要静态得,**这里就是<table> <tr><td></td></tr></table>**
<br> body {margin: 0;font-family:Helvetica, Georgia, Arial, sans-serif, 宋体;font-size:13px;}<br> table {<br> max-width: 100%;<br> background-color: transparent;<br> border-collapse: collapse;<br> border-spacing: 0;<br> }<br> .table {<br> width: 100%;<br> margin-bottom: 20px;<br> background-color: #ffffff;<br> }<br> .table-striped tbody>tr:nth-child(odd)>td,<br> .table-striped tbody>tr:nth-child(odd)>th{background-color:#F5F5F5;}<br> .table-striped tbody>tr:nth-child(odd)>td, <br> .table-striped tbody>tr:nth-child(odd)>th<br> {<br> background-color: #f9f9f9;<br> }<br> .table th,<br> .table td {<br> padding: 8px;<br> line-height: 20px;<br> text-align: left;<br> vertical-align: top;<br> border-top: 1px solid #dddddd;<br> }</p> <pre><code> .table th { font-weight: bold; white-space:nowrap;background-color:#f5f5f5; background-image:-moz-linear-gradient(top,#ffffff,#f5f5f5); background-image:-ms-linear-gradient(top,#ffffff,#f5f5f5); background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#FAFAF9), to(#f5f5f5)); background-image:-webkit-linear-gradient(top,#ffffff,#f5f5f5); background-image:-o-linear-gradient(top,#ffffff,#f5f5f5); background-image:linear-gradient(top,#ffffff,#f5f5f5); background-repeat:repeat-x; } .table thead th { vertical-align: bottom; } .table-bordered { border: 1px solid #ddd; border-collapse: separate; * border-collapse: collapse; border-left: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .table-bordered th, .table-bordered td { border-left: 1px solid #dddddd; } </style> </code></pre> <p></head><br> <body><br> <table class="table table-striped table-bordered "><br> <thead><br> <tr><br> <th>序号</th><br> <th>课程名称</th><br> <th>申报单位</th><br> <th>课程负责人</th><br> <th>申请课程类别</th><br> </tr><br> </thead><br> <tbody><br> <tr><br> <td>1</td><br> <td>宏观经济1</td><br> <td>经济学系1</td><br> <td>负责人1</td><br> <td>课程类别1</td><br> </tr><br> <tr><br> <td>2</td><br> <td>宏观经济2</td><br> <td>经济学系2</td><br> <td>负责人2</td><br> <td>课程类别2</td><br> </tr><br> <tr><br> <td>3</td><br> <td>宏观经济3</td><br> <td>经济学系3</td><br> <td>负责人3</td><br> <td>课程类别3</td><br> </tr><br> <tr><br> <td>4</td><br> <td>宏观经济4</td><br> <td>经济学系4</td><br> <td>负责人4</td><br> <td>课程类别4</td><br> </tr><br> <tr><br> <td>5</td><br> <td>宏观经济5</td><br> <td>经济学系5</td><br> <td>负责人5</td><br> <td>课程类别5</td><br> </tr><br> </tbody><br> </table><br> </body><br> </html></p>

表格示例
之前添加代码格式错乱,可进入这个地址看下。
我博客有一篇文章 专门写的这个表格。效果感觉不错。自带鼠标滑过背景色
https://blog.csdn.net/qq_17040587/article/details/72466143
喜欢就拿走吧
推荐了使用boorstrop框架,里面有很多表格组件,自适应pc和移动端,菜鸟教程里有很多写好的表单模板,样式还有悬浮变色等特效跟你想要的差不多,
http://www.runoob.com/bootstrap/bootstrap-tables.html
请大家再帮我看看这个问题该如何解决
https://blog.csdn.net/Misszhoudandan/article/details/82079004