如何在表中应用媒体查询?

时间:2015-06-18 14:35:12

标签: javascript html css html5 responsive-design

我创建了一个网站,它现在作为非响应网站。 我使用了表结构格式。 现在我打算让它完全响应? 有没有办法从表格结构变为完整的响应式网站? 关于如何做的任何想法或任何方法。

下面是我的表结构代码:

 <html>
<head>
<title>LearningFox</title>
<link rel="stylesheet" href="style/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
body{
    bgcolor:#FFFFFF;
    TOPMARGIN:0;
    LEFTMARGIN:0;
    RIGHTMARGIN:0;
}

table.responsive{
    width:100%;
    border:0;
    cellpadding:0;
    cellspacing:0;
}

</style>
</head>
<link href="../style.css" rel="stylesheet" type="text/css">


<body bgcolor="#FFFFFF" TOPMARGIN="0" LEFTMARGIN="0" RIGHTMARGIN="0">

<table class="responsive">

<tr>
<td align="center">
<table width="800" height="600" border="0" cellspacing="0" cellpadding="0">

  <tr bgcolor="#366C88">
    <td colspan="2"  style="background-image:url('../site_conf/images/det_banner.jpg'); background-repeat:no-repeat; background-position:center;" width="100%" height="100" align="right">
<TABLE BORDER="0"  CELLPADDING="2" CELLSPACING="0" WIDTH="190" >
    <TR>
        <TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000">Logged in as: <B><?php echo $lms_username; ?></B></TD>
    </TR>
        <?php
        if($lms_groups=="on" && $lms_user_group!=""){
        ?>
        <TR>
            <TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo"$lms_gtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_group</B>";}?></TD>        
        </TR>   
        <TR>
            <TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo "$lms_sgtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_subgroup</B>";}?></TD>

        </TR>   
        <tr>
            <TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php if($section=="reports" && $report){echo"<A HREF='index.php?section=reports&sid=$sid'>Back to Detailed Reports Section";}?></FONT></TD>
        </tr>
        <?php }?>

    </TABLE>
    <?php

    }
    ?></td>
  </tr>
  <tr>
    <td colspan="2" height="20" bgcolor="" background="images/bg.gif"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>&nbsp;</td>
                <TD align="right"><?php
    if(!is_null($sid)&&$session_error=="none")
    {
    ?><a style=""  href="index.php?section=<?php echo $section; ?>&logout=YES&sid=<?php echo $sid; ?>"><img src="images/logout.png" border="0" align="ABSMIDDLE" alt="Click here to Log Out"></a><?php
    }
    ?></TD>
            </tr>
        </table></td>
  </tr>
  <tr>
    <td valign="top" width="198"><!---------BEGIN SIDE NAV TABLE-------------><table width="198" border="0" cellspacing="0" cellpadding="0">
        <tr valign="top"> 
          <td width="198"><?php
                if(!is_null($sid)&&$session_error=="none")
                {
                    include($dir_components."navbar2.php");
                }
                ?></td>
        </tr>
        <tr><td>&nbsp;</td></tr>
        <tr>
            <td><?php
            /*
                if(!is_null($sid)&&$session_error=="none")
                {
                    include($dir_components."tech.php");
                }
            */
                ?></td>
        </tr>
      </table></td>
    <!--<td class="boxcontent" VALIGN="TOP" width="602" style="border:1px solid red;">-->
    <td class="boxcontent" VALIGN="TOP" >
    <?php 
    include($mysection);
    echo("$mysection");
    ?></td>
  </tr>
  <tr>
    <td colspan="2" align="center" valign="bottom" id="copyright"><hr>
     </td>
  </tr>
</table>
</td>
</tr>
</table>
</body>
</html>

0 个答案:

没有答案