无法获取我的CSS <table> 赋予工作权利

Question

I have a problem with my table whenever I add CSS for it it will not align with the rest of my website i have tried changing the individual values for the width but it still seems hit and miss any tips for this? 每当我为它添加CSS时，我的表就会出现问题，它与我的网站的其余部分不一致，我尝试更改宽度的各个值，但看起来仍然很流行，并且缺少任何提示吗？

Here is the code. 这是代码。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title> - Contact</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript">
function checkForm() {
    var theName = document.getElementById('name').value;
    var theEmail = document.getElementById('email').value;
    var theMessage = document.getElementById('message');
    var emailerr = document.getElementById('emailspan');
    var nameerr = document.getElementById('namespan');
    var messageerr = document.getElementById('messagespan');
    var message;
    var myregex = /\S+@\S+\.\S+/;
    if(theName==""){
        message = 'Name is required;';
        document.form1.name.focus();
        nameerr.innerHTML = message;
        return false;
    } else{
        nameerr.innerHTML ="";
    }
    if(theEmail=="") {
        message = 'Email is required;';
        document.form1.email.focus();
        emailerr.innerHTML = message;
        return false;
    } else if (!myregex.test(theEmail)){
        emailerr.innerHTML = "Your email entry is invalid;";
        document.form1.email.focus();
        return false;
    } else {
        emailer.innerHTML ="";
    }
    if(theMessage.value=="" || theMessage.value ==null || theMessage.value.indexOf('\n') > 0) {
        message = 'Please enter your message;';
        document.form1.message.focus();
        messageerr.innerHTML = message;
        return false;
    } else {
        messageerr.innerHTML = "";
    }
}
</script>
<style>

</style>
    </head>
    <body>
      <header><img src="images/simple-logo.png" alt="logo"</img> </header>
      <nav>
         <ul>
           <li><a href="index.html" class="current">Home</a></li>
           <li><a href="about.html" class="current">About</a></li>
           <li><a href="contact.php" class="current">Contact</a></li>
           <li><a href="gallery.html" class="current">Gallery</a></li>
           <li><a href="resume.html" class="current">Resume</a></li>
         </ul>
      </nav>
     <h1> Contact me!</h1>
<?php
    if(isset($_POST['send_email'])){
        // collect the form values
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];
        // set the email properties
        $to = 'matthewc57@yahoo.com';
        $subject = "Contact Form Submission";
        $from = $email;
        $headers = "From: $from";
        // attempt to send the mail, catch errors if they occur
        try {
            mail($to, $subject, $message, $headers);
            $msg = "<strong>Your mail was sent successfully!</strong>";
        } catch(Exception $e) {
            $msg = "An Exception was thrown: ".$e -> getMessage()."<br>";
        }
    }
?>

    <table align="left">
    <form name="form1" method="post" action="<?php $_SERVER['PHP_SELF']?>" onSubmit="return checkForm()">
    <tr><th>Name:</th>
        <td><input type="text" name="name" id="name" /><br><span style="color:red;" id="namespan"></span>
        </td>
    </tr>
    <tr><th>Email:</th>
        <td><input type="text" name="email" id="email" /><br><span style="color:red;" id="emailspan"></span>
        </td>
    </tr>
    <tr><th>Message:</th>
        <td><textarea name="message" id="message"></textarea><br><span style="color:red;" id="messagespan"></span>
        </td>
    </tr>
    <tr><td></td><td><input type="submit" name="send_email" value="Send Email Message" /></td></tr>
    </form>
    </table>

    <footer></footer>
   </body>

</html>

Here is the CSS: 这是CSS：

@charset "UTF-8";
/* CSS Document */

body{
    font-size:16px;
    cursor:default;
    font-family:Georgia, serif;
    background-color:#000000;
    color: white;
    }


header {
        border-radius: 5px;
        text-align: center;
        margin-top: 12px;
        height: 71px;
    }
nav { 
        border-radius: 5px;
        height: 20px;
        width: auto;
        display: block;
        text-align:center;
        padding-right: 35px;
        color: #ffffff;
        font-weight:bold;
        background-color:#8000aa;
        padding-top: .05px;
        padding-bottom: 20px;
        margin-top: 12px;
        margin-bottom: 12px;}

nav li { 
        display: inline;
        float: center;
        }

nav a {

    display: block, inline;
    width: 60px;

}
/*link styles*/
a:link {
    text-decoration: none;

}

a:visited {
    text-decoration: underline;
    color: white;
}

a:hover {
    text-decoration: underline;
    color: blue;
}

a:active {
    text-decoration: underline;
}
/* end link styles */

/* main content */

h1 {
        border-radius: 5px;
        width: auto;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 12px;
        background-color: #8000aa;}
table {
        border-radius: 5px;
        width: 36px;
        height: 150px;
        margin: 0 auto;
        text-align: center;
        padding-top:12px;
        padding-bottom:12px;
        margin-bottom: 12px;
        background-color: #8000aa;
}
p {
        border-radius: 5px;
        width: auto;
        height: auto;
        margin: 0 auto;
        text-align: center;
        padding-top:12px;
        padding-bottom:12px;
        margin-bottom: 12px;
        background-color: #8000aa;}

p a {
    font-weight: bold;
    }

/* end main content*/

footer {
        border-radius: 5px;
        clear: both;
        text-align: center;
        padding-top:12px; 
        padding-bottom:12px;
        margin-bottom: 12px;
        font-weight:bold;
    background-color:#8000aa;}

Answer 1

How can be that your table is so small? 你的桌子怎么这么小？

width: 36px;
height: 150px;

Did you try this? 你有尝试过吗？

width: 100%;
height: auto;

This is of course just a guess. 当然，这只是一个猜测。

无法获取我的CSS <table> 赋予工作权利

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-12-06 01:07:58

无法获取我的CSS <table> 赋予工作权利

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-12-06 01:07:58

解决方案1
1 已采纳 2015-12-06 01:07:58