css html 表格布局

image.png
三列平分,两列第二列占三分之二,单列占满怎么实现?

阅读 1.8k
3 个回答

td 的 colspan 属性合并列

表格嵌套
参考 https://blog.csdn.net/cb24746...
文档 https://developer.mozilla.org...
image.png

<!DOCTYPE html>
<html>
 <head> 
  <style>
    table {  border-collapse: collapse;width:500px;}
    th,td{border: 1px solid #ccc;}    
    th{width:100px;} 
    td > table{border-style: hidden;}
</style> 
 </head> 
 <body> 
  <table> 
   <tbody>
    <tr> 
     <th>姓名</th> 
     <td > </td> 
     <th>姓名</th> 
     <td> </td> 
     <th>姓名</th> 
     <td> </td> 
    </tr> 
    <tr> 
     <td colspan="99"> 
      <table> 
       <tbody>
        <tr> 
         <th>编码</th> 
         <td>80</td> 
         <th>编码</th> 
         <td>80</td> 
        </tr> 
       </tbody>
      </table> </td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

element ui 里边表格有类似的可以实现,可以去参考
你也可以直接用合并列:colspan,合并行:rowspan的方法

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题