php - 表格布局的 CSS 问题

Question

我创建了一个表单来在我的系统上创建一个用户帐户。在表格下方，我使用了一个具有两个功能的表格：

删除表上的一行，这也删除了数据库中的数据
使用表格修改用户账户信息

这两种形式工作正常，除了我不能告诉我的桌子保持在固定大小的第一种形式之下。

我是 php、css 和 jquery 的新手，但在这一点上我完全被卡住了。

你能看看我的（长）代码吗？

小提琴链接

http://jsfiddle.net/C7Ryz/

生成的 HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Manage customer</title>
<link href="styleRegister.css" rel="stylesheet" type="text/css" />
<link href="styleShowRemove.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="Jqueryset/jquery/css/overcast/jquery-ui-1.10.2.custom.css"/>
<script type="text/javascript" src="Jqueryset/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="Jqueryset/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="Jqueryset/jquery/jquery-ui-1.10.2.custom.js"></script>
<script type="text/javascript">
        $(document).ready( function () {
                $('#userdata').dataTable( {
                        "bJQueryUI": true,
                        "bStateSave": true,
                        "aLengthMenu": [[1,2,3,4,5,10, 25, 50, -1], [1,2,3,4,5,10, 25, 50, "All"]],
                        "sScrollY": "150px",
                        "sScrollX": "50%"
                } );

                $('a').click(function(){
                        var del_id = $(this).attr('id');
                        var parent = $(this).parent();
                        $.post('deletemember.php', {id:del_id},function(data){
                                parent.slideUp('slow', function() {$(this).closest('tr').remove();});
                        });
                });

                $(".edit_tr").click(function(){
                        var ID=$(this).attr('id');
                        $("#firstname_"+ID).hide();
                        $("#lastname_"+ID).hide();
                        $("#email_"+ID).hide();
                        $("#login_"+ID).hide();
            $("#passwd_"+ID).hide();
                        $("#grp_"+ID).hide();
                        $("#firstname_input_"+ID).show();
                        $("#lastname_input_"+ID).show();
                        $("#email_input_"+ID).show();
                        $("#login_input_"+ID).show();
            $("#passwd_input_"+ID).show();
                        $("#grp_input_"+ID).show();
                }).change(function(){
                        var ID=$(this).attr('id');
                        var firstname=$("#firstname_input_"+ID).val();
                        var lastname=$("#lastname_input_"+ID).val();
                        var email=$("#email_input_"+ID).val();
                        var login=$("#login_input_"+ID).val();
            var passwd=$("#passwd_input_"+ID).val();
                        var grp=$("#grp_input_"+ID).val();
                        var dataString = 'id='+ ID +'&firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&login=' + login + '&passwd=' + passwd + '&grp=' + grp;
alert(dataString);
                        $("#grp_"+ID).html('<img src="images/load.gif" />'); // Loading image
                        if(firstname.length>0 && lastname.length>0 && email.length>0 && login.length>0 && ((passwd.length>7 && passwd.length<21) || passwd.length<1)) {
alert('ICI');
                                $.ajax({
                                        type: "POST",
                                        url: "table_ajax_showremove.php",
                                        data: dataString,
                                        cache: false,
                                        success: function(html){
                                                $("#firstname_"+ID).html(firstname);
                                                $("#lastname_"+ID).html(lastname);
                                                $("#email_"+ID).html(email);
                                                $("#login_"+ID).html(login);
                        $("#passwd_"+ID).html(passwd);
                                                $("#grp_"+ID).html(grp);
                                        }
                                });

                        }else{
                        var errormsg="";
                                if (firstname.length<1){
                                        errormsg+='Error in Firstname\n';
                                }
                                if (lastname.length<1){
                                        errormsg+='Error in Lastname\n';
                                }
                                if (email.length<1){
                                        errormsg+='Error in Email\n';
                                }
                                if (login.length<1){
                                        errormsg+='Error in Login\n';
                                }
                                if (passwd.length<8 || passwd.length>20){
                                        errormsg+='Error in Password (8-20 length)\n';
                                }
                if (grp.length<1 || grp == 'Select a group'){
                    errormsg+='Not a group valid\n';
                }

                                alert(errormsg);
                        }
                });
                // Edit input box click action
                $(".editbox").mouseup(function(){
                        return false
                });
                // Outside click action
                $(document).mouseup(function(){
                        $(".editbox").hide();
                        $(".text").show();
                });

        } );
</script>
</head>
<body>
<div id="registeruser"><form id="loginForm" name="loginForm" method="post" action="register-exec.php">
      <fieldset>
        <legend>Register</legend>
        <label for="fname">First Name</label>
        <input name="fname" type="text" id="fname" maxlength="20" value="" />
        <div class="clear"></div>
        <label for="lname">Last Name</label>
        <input name="lname" type="text" id="lname" maxlength="20" value="" />
        <div class="clear"></div>
        <label for="email">Email</label>
        <input name="email" type="text" id="email" maxlength="30" value="" />
        <div class="clear"></div>
        <label for="login">Login</label>
        <input name="login" type="text" id="login" maxlength="10" value="" />
        <div class="clear"></div>
        <label for="password">Password</label>
        <input name="password" type="password" id="password" maxlength="20" value="" />
        <div class="clear"></div>
        <label for="cpassword">Confirm Password</label>
        <input name="cpassword" type="password" id="cpassword" maxlength="20" value="" />
        <div class="clear"></div>
        <label for="group">Group</label><select name="group"><option selected="selected" value="Select a group">Select a group</option><OPTION value="ADMIN">ADMIN</OPTION><OPTION value="CC">CC</OPTION><OPTION value="CI">CI</OPTION><OPTION value="CL">CL</OPTION><OPTION value="EC">EC</OPTION><OPTION value="ECI">ECI</OPTION><OPTION value="IT">IT</OPTION><OPTION value="JR">JR</OPTION><OPTION value="LI">LI</OPTION><OPTION value="SN">SN</OPTION></SELECT><div class="clear"></div>
        <input type="submit" style="margin: 0px 0 0 287px;" class="button" name="commit" value="Register" />
        <BR>
          </fielset>
    </form>
    <CENTER><a href="index.php">Return to the Main Page</a> | <a href="logout.php">Logout</a></CENTER>
    <BR>
    </div>
<div id=userdatas><fieldset><form style="width: 100%"><CENTER><table id="userdataa" class="tablesorter" border="1"><thead><tr><th><center>Delete</center></th><th>Firstname</th><th>Lastname</th><th>Email</th><th>Login</th><th>Password</th><th>Group</th></tr></thead><tbody><tr id="1" class="edit_tr">
                        <td class="edit_td">
                                <center>
                                        <a href="javascript:return(0);" id="1">
                                                <img src="images/remove.png" height="12px" width="12px"/>
                                        </a>
                                </center>
                        </td>
                        <td class="edit_td">
                                <span id="firstname_1" class="text">
                                </span>
                                <input type="text" value="Jere" class="editbox" id="firstname_input_1" /&gt;
                        </td>
                        <td class="edit_td">
                                <span id="lastname_1" class="text">
                                </span>
                                <input type="text" value="Dan" class="editbox" id="lastname_input_1"
                        </td>
                        <td class="edit_td">
                                <span id="email_1" class="text">
                                </span>
                                <input type="text" value="jere.d@ext" class="editbox" id="email_input_1"
                        </td>
                        <td class="edit_td">
                                <span id="login_1" class="text">
                                </span>
                                <input type="text" disabled="disabled" value="danneje" class="editbox" id="login_input_1"
                        </td>
                        <td class="edit_td">
                                <span id="passwd_1" class="text">
                                </span>
                                <input type="password" maxlength="20" value="" class="editbox" id="passwd_input_1"
                        </td>
                        <td class="edit_td\>
                                <span id="grp_1" class="text">
                                </span>
                <select name="group" id="grp_input_1" class="editbox"><OPTION value="ADMIN">ADMIN</OPTION><OPTION value="C2SIS">C2SIS</OPTION><OPTION value="CITIS">CITIS</OPTION><OPTION value="CLIMA">CLIMA</OPTION><OPTION value="ECAS">ECAS</OPTION><OPTION value="ECI">ECI</OPTION><OPTION value="ITIC">ITIC</OPTION><OPTION value="JRC">JRC</OPTION><OPTION value="LISO">LISO</OPTION><OPTION value="SNET">SNET</OPTION></SELECT> 
                        </td>
                     </tr><tr id="32" class="edit_tr">
                        <td class="edit_td">
                                <center>
                                        <a href="javascript:return(0);" id="32">
                                                <img src="images/remove.png" height="12px" width="12px"/>
                                        </a>
                                </center>
                        </td>
                        <td class="edit_td">
                                <span id="firstname_32" class="text">
                                </span>
                                <input type="text" value="rikitou" class="editbox" id="firstname_input_32" /&gt;
                        </td>
                        <td class="edit_td">
                                <span id="lastname_32" class="text">
                                </span>
                                <input type="text" value="riki" class="editbox" id="lastname_input_32"
                        </td>
                        <td class="edit_td">
                                <span id="email_32" class="text">
                                </span>
                                <input type="text" value="roo@ro.fr" class="editbox" id="email_input_32"
                        </td>
                        <td class="edit_td">
                                <span id="login_32" class="text">
                                </span>
                                <input type="text" disabled="disabled" value="roro" class="editbox" id="login_input_32"
                        </td>
                        <td class="edit_td">
                                <span id="passwd_32" class="text">
                                </span>
                                <input type="password" maxlength="20" value="" class="editbox" id="passwd_input_32"
                        </td>
                        <td class="edit_td\>
                                <span id="grp_32" class="text">
                                </span>
                <select name="group" id="grp_input_32" class="editbox"><OPTION value="ADMIN">ADMIN</OPTION><OPTION value="C2SIS">C2SIS</OPTION><OPTION value="CITIS">CITIS</OPTION><OPTION value="CLIMA">CLIMA</OPTION><OPTION value="ECAS">ECAS</OPTION><OPTION value="ECI">ECI</OPTION><OPTION value="ITIC">ITIC</OPTION><OPTION value="JRC">JRC</OPTION><OPTION value="LISO">LISO</OPTION><OPTION value="SNET">SNET</OPTION></SELECT>    
                        </td>
                     </tr><tr id="2" class="edit_tr">
                        <td class="edit_td">
                                <center>
                                        <a href="javascript:return(0);" id="2">
                                                <img src="images/remove.png" height="12px" width="12px"/>
                                        </a>
                                </center>
                        </td>
                        <td class="edit_td">
                                <span id="firstname_2" class="text">
                                </span>
                                <input type="text" value="Christoph" class="editbox" id="firstname_input_2" /&gt;
                        </td>
                        <td class="edit_td">
                                <span id="lastname_2" class="text">
                                </span>
                                <input type="text" value="Rosen" class="editbox" id="lastname_input_2"
                        </td>
                        <td class="edit_td">
                                <span id="email_2" class="text">
                                </span>
                                <input type="text" value="christophe.rosen@ext.fr" class="editbox" id="email_input_2"
                        </td>
                        <td class="edit_td">
                                <span id="login_2" class="text">
                                </span>
                                <input type="text" disabled="disabled" value="rozench" class="editbox" id="login_input_2"
                        </td>
                        <td class="edit_td">
                                <span id="passwd_2" class="text">
                                </span>
                                <input type="password" maxlength="20" value="" class="editbox" id="passwd_input_2"
                        </td>
                        <td class="edit_td\>
                                <span id="grp_2" class="text">
                                </span>
                <select name="group" id="grp_input_2" class="editbox"><OPTION value="ADMIN">ADMIN</OPTION><OPTION value="C2SIS">C2SIS</OPTION><OPTION selected="selected" value="CITIS">CITIS</OPTION><OPTION value="CLIMA">CLIMA</OPTION><OPTION value="ECAS">ECAS</OPTION><OPTION value="ECI">ECI</OPTION><OPTION value="ITIC">ITIC</OPTION><OPTION value="JRC">JRC</OPTION><OPTION value="LISO">LISO</OPTION><OPTION value="SNET">SNET</OPTION></SELECT> 
                        </td>
                     </tr><tr id="25" class="edit_tr">
                        <td class="edit_td">
                                <center>
                                        <a href="javascript:return(0);" id="25">
                                                <img src="images/remove.png" height="12px" width="12px"/>
                                        </a>
                                </center>
                        </td>
                        <td class="edit_td">
                                <span id="firstname_25" class="text">
                                </span>
                                <input type="text" value="Michael" class="editbox" id="firstname_input_25" /&gt;
                        </td>
                        <td class="edit_td">
                                <span id="lastname_25" class="text">
                                </span>
                                <input type="text" value="Schle" class="editbox" id="lastname_input_25"
                        </td>
                        <td class="edit_td">
                                <span id="email_25" class="text">
                                </span>
                                <input type="text" value="michael.schle@a.fr" class="editbox" id="email_input_25"
                        </td>
                        <td class="edit_td">
                                <span id="login_25" class="text">
                                </span>
                                <input type="text" disabled="disabled" value="schleml" class="editbox" id="login_input_25"
                        </td>
                        <td class="edit_td">
                                <span id="passwd_25" class="text">
                                </span>
                                <input type="password" maxlength="20" value="" class="editbox" id="passwd_input_25"
                        </td>
                        <td class="edit_td\>
                                <span id="grp_25" class="text">
                                </span>
                <select name="group" id="grp_input_25" class="editbox"><OPTION value="ADMIN">ADMIN</OPTION><OPTION value="C2SIS">C2SIS</OPTION><OPTION value="CITIS">CITIS</OPTION><OPTION value="CLIMA">CLIMA</OPTION><OPTION value="ECAS">ECAS</OPTION><OPTION value="ECI">ECI</OPTION><OPTION value="ITIC">ITIC</OPTION><OPTION value="JRC">JRC</OPTION><OPTION value="LISO">LISO</OPTION><OPTION selected="selected" value="SNET">SNET</OPTION></SELECT>    
                        </td>
                     </tr></tbody></table></CENTER></form></fieldset></div></body></html>

PHP 表单

<?php
require_once('auth.php');
?>

<?php
//  session_start();
require 'config.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Manage customer</title>
<link href="styleRegister.css" rel="stylesheet" type="text/css" />
<link href="styleShowRemove.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="Jqueryset/jquery/css/overcast/jquery-ui-1.10.2.custom.css"/>
<script type="text/javascript" src="Jqueryset/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="Jqueryset/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="Jqueryset/jquery/jquery-ui-1.10.2.custom.js"></script>
<script type="text/javascript">
        $(document).ready( function () {
                $('#userdata').dataTable( {
                        "bJQueryUI": true,
                        "bStateSave": true,
                        "aLengthMenu": [[1,2,3,4,5,10, 25, 50, -1], [1,2,3,4,5,10, 25, 50, "All"]],
                        "sScrollY": "150px",
                        "sScrollX": "50%"
                } );

                $('a').click(function(){
                        var del_id = $(this).attr('id');
                        var parent = $(this).parent();
                        $.post('deletemember.php', {id:del_id},function(data){
                                parent.slideUp('slow', function() {$(this).closest('tr').remove();});
                        });
                });

                $(".edit_tr").click(function(){
                        var ID=$(this).attr('id');
                        $("#firstname_"+ID).hide();
                        $("#lastname_"+ID).hide();
                        $("#email_"+ID).hide();
                        $("#login_"+ID).hide();
            $("#passwd_"+ID).hide();
                        $("#grp_"+ID).hide();
                        $("#firstname_input_"+ID).show();
                        $("#lastname_input_"+ID).show();
                        $("#email_input_"+ID).show();
                        $("#login_input_"+ID).show();
            $("#passwd_input_"+ID).show();
                        $("#grp_input_"+ID).show();
                }).change(function(){
                        var ID=$(this).attr('id');
                        var firstname=$("#firstname_input_"+ID).val();
                        var lastname=$("#lastname_input_"+ID).val();
                        var email=$("#email_input_"+ID).val();
                        var login=$("#login_input_"+ID).val();
            var passwd=$("#passwd_input_"+ID).val();
                        var grp=$("#grp_input_"+ID).val();
                        var dataString = 'id='+ ID +'&firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&login=' + login + '&passwd=' + passwd + '&grp=' + grp;
alert(dataString);
                        $("#grp_"+ID).html('<img src="images/load.gif" />'); // Loading image
                        if(firstname.length>0 && lastname.length>0 && email.length>0 && login.length>0 && ((passwd.length>7 && passwd.length<21) || passwd.length<1)) {
alert('ICI');
                                $.ajax({
                                        type: "POST",
                                        url: "table_ajax_showremove.php",
                                        data: dataString,
                                        cache: false,
                                        success: function(html){
                                                $("#firstname_"+ID).html(firstname);
                                                $("#lastname_"+ID).html(lastname);
                                                $("#email_"+ID).html(email);
                                                $("#login_"+ID).html(login);
                        $("#passwd_"+ID).html(passwd);
                                                $("#grp_"+ID).html(grp);
                                        }
                                });

                        }else{
                        var errormsg="";
                                if (firstname.length<1){
                                        errormsg+='Error in Firstname\n';
                                }
                                if (lastname.length<1){
                                        errormsg+='Error in Lastname\n';
                                }
                                if (email.length<1){
                                        errormsg+='Error in Email\n';
                                }
                                if (login.length<1){
                                        errormsg+='Error in Login\n';
                                }
                                if (passwd.length<8 || passwd.length>20){
                                        errormsg+='Error in Password (8-20 length)\n';
                                }
                if (grp.length<1 || grp == 'Select a group'){
                    errormsg+='Not a group valid\n';
                }

                                alert(errormsg);
                        }
                });
                // Edit input box click action
                $(".editbox").mouseup(function(){
                        return false
                });
                // Outside click action
                $(document).mouseup(function(){
                        $(".editbox").hide();
                        $(".text").show();
                });

        } );
</script>
</head>
<body>
<?php

    if( isset($_SESSION['ERRMSG_ARR']) && is_array($_SESSION['ERRMSG_ARR']) && count($_SESSION['ERRMSG_ARR']) >0 ) {
        echo '<ul class="err">';
        $allerror="";
        foreach($_SESSION['ERRMSG_ARR'] as $msg) {
            list($before, $after) = explode(':', $msg, 2);

            if ($before == "fname"){
                $fname = $after;
            }else if ($before == "lname"){
                $lname = $after;
            }else if ($before == "email"){
                $email = $after;
            }else if ($before == "login"){
                $login = $after;
            }else if ($before == "group"){
                $group = $after;
            }else{
                $allerror=$allerror."<li>$msg</li>"; 
            }
        }
        echo '</ul>';
        unset($_SESSION['ERRMSG_ARR']);
    }

?>
<?php

if ($currentgroup == ""){

$combobox = "SELECT name from Arc_Customer ORDER BY name";
$reqcbb = mysql_query($combobox) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());

    print '<div id="registeruser"><form id="loginForm" name="loginForm" method="post" action="register-exec.php">
      <fieldset>
        <legend>Register</legend>
        <label for="fname">First Name</label>
        <input name="fname" type="text" id="fname" maxlength="20" value="'.$fname.'" />
        <div class="clear"></div>
        <label for="lname">Last Name</label>
        <input name="lname" type="text" id="lname" maxlength="20" value="'.$lname.'" />
        <div class="clear"></div>
        <label for="email">Email</label>
        <input name="email" type="text" id="email" maxlength="30" value="'.$email.'" />
        <div class="clear"></div>
        <label for="login">Login</label>
        <input name="login" type="text" id="login" maxlength="10" value="'.$login.'" />
        <div class="clear"></div>
        <label for="password">Password</label>
        <input name="password" type="password" id="password" maxlength="20" value="'.$password.'" />
        <div class="clear"></div>
        <label for="cpassword">Confirm Password</label>
        <input name="cpassword" type="password" id="cpassword" maxlength="20" value="'.$cpassword.'" />
        <div class="clear"></div>
        <label for="group">Group</label><select name="group">';

        if ($group == ""){
            echo "<option selected=\"selected\" value=\"Select a group\">Select a group</option>";
        }else{
            echo "<option value=\"Select a group\">Select a group</option>";
        } 
        while ($row = mysql_fetch_array($reqcbb)){
            $cbbname = $row["name"];
            if ($group == "$cbbname"){
                echo "<OPTION selected=\"selected\" value=\"$cbbname\">$cbbname</OPTION>";
            }else{
                echo "<OPTION value=\"$cbbname\">$cbbname</OPTION>";
            }
        }
        print '</SELECT><div class="clear"></div>
        <input type="submit" style="margin: 0px 0 0 287px;" class="button" name="commit" value="Register" />
        '.$allerror.'<BR>
          </fielset>
    </form>
    <CENTER><a href="index.php">Return to the Main Page</a> | <a href="logout.php">Logout</a></CENTER>
    <BR>
    </div>';
}else{
    header("location: login-form.php?id=not");
        exit();

}
?>

<?php

$userdata = "SELECT member_id, firstname, lastname, email, login, grp FROM members ORDER BY lastname";
$requserdata = mysql_query($userdata) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());

echo '<div id=userdatas><fieldset><form style="width: 100%">';

//SEARCH FOR WHICH REASON WE CANNOT RESIZE THE TABLE ==> CHANGE id="userdataa" to id="userdata"
echo '<CENTER><table id="userdataa" class="tablesorter" border="1"><thead><tr><th><center>Delete</center></th><th>Firstname</th><th>Lastname</th><th>Email</th><th>Login</th><th>Password</th><th>Group</th></tr></thead><tbody>';

        while ($row = mysql_fetch_row($requserdata)){
                $memberid=$row[0];
                $firstname=$row[1];
                $lastname=$row[2];
                $email=$row[3];
                $login=$row[4];
                $grp=$row[5];
        $passwd="";

                echo "<tr id=\"$memberid\" class=\"edit_tr\">
                        <td class=\"edit_td\">
                                <center>
                                        <a href=\"javascript:return(0);\" id=\"{$memberid}\">
                                                <img src=\"images/remove.png\" height=\"12px\" width=\"12px\"/>
                                        </a>
                                </center>
                        </td>
                        <td class=\"edit_td\">
                                <span id=\"firstname_$memberid\" class=\"text\">
                                </span>
                                <input type=\"text\" value=\"$firstname\" class=\"editbox\" id=\"firstname_input_$memberid\" /&gt;
                        </td>
                        <td class=\"edit_td\">
                                <span id=\"lastname_$memberid\" class=\"text\">
                                </span>
                                <input type=\"text\" value=\"$lastname\" class=\"editbox\" id=\"lastname_input_$memberid\"
                        </td>
                        <td class=\"edit_td\">
                                <span id=\"email_$memberid\" class=\"text\">
                                </span>
                                <input type=\"text\" value=\"$email\" class=\"editbox\" id=\"email_input_$memberid\"
                        </td>
                        <td class=\"edit_td\">
                                <span id=\"login_$memberid\" class=\"text\">
                                </span>
                                <input type=\"text\" disabled=\"disabled\" value=\"$login\" class=\"editbox\" id=\"login_input_$memberid\"
                        </td>
                        <td class=\"edit_td\">
                                <span id=\"passwd_$memberid\" class=\"text\">
                                </span>
                                <input type=\"password\" maxlength=\"20\" value=\"$passwd\" class=\"editbox\" id=\"passwd_input_$memberid\"
                        </td>
                        <td class=\"edit_td\>
                                <span id=\"grp_$memberid\" class=\"text\">
                                </span>
                <select name=\"group\" id=\"grp_input_$memberid\" class=\"editbox\">";

                $combobox = "SELECT name from Arc_Customer ORDER BY name";
                $reqcbb = mysql_query($combobox) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());

                        while ($row = mysql_fetch_array($reqcbb)){
                                $cbbname = $row["name"];
                                if ($grp == "$cbbname"){
                                        echo "<OPTION selected=\"selected\" value=\"$cbbname\">$cbbname</OPTION>";
                                }else{
                                        echo "<OPTION value=\"$cbbname\">$cbbname</OPTION>";
                                }
                        }
                        print "</SELECT>    
                        </td>
                     </tr>";
        }

echo '</tbody></table></CENTER></form></fieldset></div></body></html>';
?>

第一个 FORM 的 CSS

*{ 
    margin: 0px; 
    padding: 0;
}

body{ 
    font-family: Georgia, 
    serif; 
    background: url(images/member-page-bg.jpg) top center no-repeat #c4c4c4;
    color: #3a3a3a;  
}

.clear{
    clear: both; 
}

form{ 
    width: 406px; 
    margin: 170px auto 0; 
}

legend{ 
    display: none;
}

fieldset{ 
    border: 0;
}

label{ 
    width: 150px; 
    text-align: right; 
    float: left; margin: 0 10px 0 0; 
    padding: 9px 0 0 0; 
    font-size: 16px; 
}

input{ 
    width: 220px;
    display: block;
    padding: 4px;
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #3a3a3a; 
    font-family: Georgia, serif;
}

select{
        width: 220px;
        display: block;
        padding: 4px;
        margin: 0 0 10px 0;
        font-size: 18px;
        color: #3a3a3a;
        font-family: Georgia, serif;
}

.button{
    background: url(images/button-bg.png) repeat-x top center;
    border: 1px solid #999;
        -moz-border-radius: 5px; 
    padding: 5px;
    color: black;
    font-weight: bold;
        -webkit-border-radius: 5px;
    font-size: 13px;
    width: 70px;
}

.button:hover { 
    background: white; 
    color: black; 
}

表格的 CSS

body
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.editbox
{
display:none
}
td
{
padding:5px;
}
.editbox
{
font-size:14px;
width:270px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
//.edit_tr:hover
//{
//background:url(images/edit.gif) right no-repeat #80C8E5;
//cursor:pointer;
//}

score 0 · Accepted Answer

我为我的页面找到了解决方法:-)

我刚刚删除了该功能

        // Outside click action
        $(document).mouseup(function(){
                $(".editbox").show(); // I've change .hide to .show
                $(".text").show();
        });

并保留了身体，

                $(".editbox").show(); // I've change .hide to .show
                $(".text").show();

现在页面工作正常。

我现在认为这可能不是正确的方法，并且可能应该审查代码。但现在我想我可以关闭这篇文章了。

为了您的帮助！

score 0 · Accepted Answer

只是一个镜头：当您谈论“固定大小”时，您是否尝试过 table-layout:fixed; 为你的桌子？

然后，我根本看不到您在哪里设置表格或列的宽度。

HTML 输出确实会有很大帮助...

score 0 · Accepted Answer

所以绝对问题来自Jquery javascript：-p

我修改了最后一个函数

            // Edit input box click action
            $(".editbox").mouseup(function(){
                    return false;
            });
            // Outside click action
            $(document).mouseup(function(){
                    $(".editbox").show(); // I've change .hide to .show
                    $(".text").show();
            });

现在，除了我必须点击表格之外，选择和修改故事中的元素没有任何问题。

我现在正在搜索如何在页面加载时直接查看填充的表格。我不想点击表格来查看表格的内容：-p

希望今天早上我能找到解决方案。然后这个周末我会买一本书，学习 php、css 和 Jquery/javasript :-)

php - 表格布局的 CSS 问题

3 回答 3

Related

Reference