Html 如何使WordPress页面模板具有响应性？_Html_Wordpress_Responsive

Html 如何使WordPress页面模板具有响应性？

html wordpress

Html 如何使WordPress页面模板具有响应性？,html,wordpress,responsive,Html,Wordpress,Responsive,我有一个wordpress网站，使用hestia主题。我添加了一些自定义页面模板。如何让他们响应？在其中一个页面中，我有两个表格并排向右对齐，当我更改屏幕大小时，它们的底部边框不匹配代码如下： <div class="div2" id="profile" style="display: none;"> <?php while($row = mysqli_fetch_array($search_res

我有一个wordpress网站，使用hestia主题。我添加了一些自定义页面模板。如何让他们响应？在其中一个页面中，我有两个表格并排向右对齐，当我更改屏幕大小时，它们的底部边框不匹配

代码如下：

<div class="div2" id="profile" style="display: none;">
        <?php while($row = mysqli_fetch_array($search_result)):?>
        <h1 style="text-align:center">Volunteer's Profile</h1>
        <h2 style="text-align:center"> Welcome, <?php  
        echo $row['fname']; 
        ?> !</h2>
        <br>
        
         <table class="pro" style="float:left;width:20%;">
         
               
                
                    <tr class="inpro"><th>ID</th></tr>
                    <tr class="inpro"><th>First name</th></tr>
                    <tr class="inpro"><th>Last Name</th></tr>
                    <tr class="inpro"><th>Phone</th></tr>
                    <tr class="inpro"><th>Email</th></tr>
                    <tr class="inpro"><th>DOB</th></tr>
                    <tr class="inpro"><th>City</th></tr>
                    <tr class="inpro"><th>Degree</th></tr>
                    <tr class="inpro"><th>Major</th></tr>
                    <tr class="inpro"><th>Volunteering type</th></tr>
                    <tr class="inpro"><th>Achieved hours</th></tr>
                    <tr class="inpro"><th>Membership</th></tr>
                    <tr class="inpro"><th>Points</th></tr>
                    <tr class="inpro"><th>Rating</th></tr>
                    <tr class="inpro"><th>Warnings</th></tr>
                    
                    </table>
                    
                    <table class="pro" style="float:left;width:30%">
                

               
                    <tr class="inpro2"><td><?php echo $row['id'];?></td></tr>
                    <tr class="inpro2"><td><?php echo $row['fname'];?></td></tr>
                    <tr class="inpro2"><td><?php echo $row['lname'];?></td></tr>
                    <tr class="inpro2"><td><?php echo $row['phone'];?></td></tr>
                    <tr class="inpro2"><td><?php echo $row['email'];?></td></tr>
                    <tr class="inpro2"><td><?php echo $row['DOB'];?></td></tr>
                    <tr class="inpro2"><td><?php echo $row['city'];?></td></tr>
                    <tr class="inpro2"><td><?php echo $row['degree'];?></td></tr>
                    <tr class="inpro2"><td><?php echo $row['major'];?></td></tr>
                    <tr class="inpro2"><td><?php echo $row['Vtype'];?></td></tr>
                    <tr class="inpro2"><td><?php echo $row['hours'];?></td></tr>
                    <tr class="inpro2"><td><?php echo $row['membership'];?></td></tr>
                    <tr class="inpro2"><td><?php echo $row['points'];?></td></tr>
                    <tr class="inpro2"><td><?php echo $row['rating'];?></td></tr>
                    <tr class="inpro2"><td><?php echo $row['warnings'];?></td></tr>
                
               <?php endwhile;?>
            </table>


志愿者简介
欢迎


身份证件
名字
姓
电话
电子邮件
出生日期
城市
度
专业
志愿型
达到小时数
会员
要点
评级
警告

此外，我还将元视口包括在头部部分中，如下所示：

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        
        <meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>


对不起，这些表是左对齐的，而不是右对齐的。看看这个主题，它使用的是Bootstrap v1（非常旧）。。。也就是说，你可以通过复习来了解如何制作网格。以及文档中的表格。这不是一个真正的PHP问题，而是CSS