Question

我使用过像这个表视图的代码如何更改其div标签样式？我想在响应中更改表结构？我怎么会改变任何想法？我可以在表格标签内使用样式吗？我厌倦了div标签，但它不起作用？任何想法如何改变这种结构完全响应？

<TABLE BORDER="1" id="login" CELLPADDING="4" CELLSPACING="0">
 <TR>

        <TD ALIGN="RIGHT"><FONT FACE="VERDANA" SIZE="2"><B>Organization ID:</TD>

        <TD><INPUT TYPE="TEXT" NAME="org_id"></TD>

      </TR> 
<TR>

        <TD ALIGN="RIGHT"><FONT FACE="VERDANA" SIZE="2"><B>UserName:</TD>

        <TD><INPUT TYPE="TEXT" NAME="uname"></TD>

      </TR>

      <TR>

        <TD ALIGN="RIGHT"><FONT FACE="VERDANA" SIZE="2"><B>Password:</TD>

        <TD><INPUT TYPE="password" NAME="pwd"></TD>

      </TR>

      <TR>

        <TD COLSPAN="2" ALIGN="RIGHT"><INPUT TYPE="IMAGE" SRC="images/login.png" BORDER="0"></TD>

      </TR>

    </TABLE>

    </FORM>

Answer 1

以百分比设置表格宽度

table{
  width:100%;
  }

Answer 2

试试这个<TABLE BORDER="1" id="login" CELLPADDING="4" CELLSPACING="0" width="100%">

Answer 3

你可以写两个html标签（表登录和Div风格登录），保持div登录隐藏，并使用媒体查询显示它，并在以较小的尺寸显示时隐藏表。

类似的东西：

<!doctype html>
<head>
<style>
    .div-login{
        display: none;
    }
    .table-login{
        display: block;
    }
     @media only screen and (max-width: 480px){
        .div-login{
            display: block;
        }
        .table-login{
            display: none;
        }
    }
</style>
</head>
<body>

 <div class='table-login'>
    <form action='destination.php' method='post'>
        <strong> write your table-styled form here </strong>
        <!-- <table> </table> -->
    </form>
 </div>
 <div class='div-login'>
    <form action='destination.php' method='post'>
        <strong> write your div-styled form here </strong>
        <!-- <div> </div> -->
    </form>
 </div>

</body>
</html>

表结构更改为响应？

3 个答案: