首页用html写一个表格，当有数据出入时显示，没有数据是隐藏，表格列名为报表编号，上传结果以及失败原因所有的文字都居中显示

用html写一个表格，当有数据出入时显示，没有数据是隐藏，表格列名为报表编号，上传结果以及失败原因所有的文字都居中显示

时间: 2024-03-01 20:51:56 浏览: 48

可以使用以下代码来实现一个当有数据输入时显示，没有数据时隐藏的表格，表格列名为“报表编号”、“上传结果”和“失败原因”，所有内容都居中显示： ```html <!DOCTYPE html> <html> <head> <title>表格示例</title> <style> table{ border-collapse: collapse; margin-top: 20px; display: none; } table td, table th{ padding: 5px; border: 1px solid black; text-align: center; } </style> </head> <body> <button onclick="showTable()">显示表格</button> <table id="myTable"> <thead> <tr> <th>报表编号</th> <th>上传结果</th> <th>失败原因</th> </tr> </thead> <tbody>  </tbody> </table> <script> function showTable(){ var table = document.getElementById("myTable"); if(table.style.display == "none"){ table.style.display = "table"; } else{ table.style.display = "none"; } } </script> </body> </html> ``` 在上面的代码中，我们首先定义了一个隐藏的表格，其样式中设置了`display:none`，表示默认情况下该表格是隐藏的。然后在页面上添加了一个按钮，当用户点击该按钮时，会调用JavaScript函数`showTable()`，该函数会根据当前表格的状态来切换表格的显示和隐藏。在表格中，我们使用了`<thead>`和`<tbody>`标签来分别表示表格的表头和表体。在表格的样式中，我们还设置了所有单元格的文本居中显示。

阅读全文