HTML里,怎么给table做一个外面的标题框

HTML里,怎么给table做一个外面的标题框,第1张

html中给table增加外面的标题框可以用div嵌套表格的方式来实现:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

 <head>

   <meta http-equiv="Content-Type" content="text/htmlcharset=utf8">

   <title>Untitled Document</title>

   <script language="JavaScript" src="js/prototype.js"></script>

   <script language="JavaScript">

     function changeStyle(){

       if(document.getElementById('test').style.display=='none'){

         alert("show")

         document.getElementById('test').style.display='block'

       }else{

         alert("hide")

         document.getElementById('test').style.display='none'

       }

     }

   </script>

 </head>

 <body>

   <input value="测试" type="button" onclick="changeStyle()">

   <select type="button" value="测试" onchange="changeStyle()">

     <option>1</option>

     <option>2</option>

   </select>

   <table>

     <tr>

     <td><!--在table中嵌套div时,必须将div放在td中,否则达不到预期效果-->

   <div id="test" style="display:none">

   <table>

     <tr>

       <td>

     <input type="text" value="1"/>

     </td>

     </tr>

   </table>

   </div>

   </td>   

     </tr>

   </table>

 </body>

</html>

 效果:

该文章解决用table标签画表格时,用border属性产生的表格重合线加粗的问题。

css部分:

html部分:

效果图如下:


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11770825.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存