表格在Firefox和Chrome中消失了

Question

I have a table and when I load the page in Firefox or chrome its shifted off the screen to the the right leading to most of the table disappearing, the table should be located in the middle of the screen and seems to be overlapping on the right outside of the page area. 我有一张桌子，当我在Firefox或chrome中加载页面时，它从屏幕上移到了右边，导致大部分桌子消失了，桌子应该位于屏幕中间，并且似乎在右边重叠了页面区域之外。

<html lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Small North Run</title>
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<link rel="stylesheet" href="default.css" type="text/css">
<link rel="stylesheet" href="sponsor.css" type="text/css">

</head>

<body>

<div id="wrapper">

<header>
    <h1>SMALL NORTH RUN</h1>
</header>

<nav>
<ul id="navlist">
    <li><a href="./">HOME</a></li>
    <li><a href="training">TRAINING REGIME</a></li>
    <li><a href="./forum">FORUM</a></li>
    <li><a href="./sponsor.php">SPONSOR</a></li>
    <li><a href="./contact.php">CONTACT</a></li>
</ul>
</nav>
<hr id="hrnav" />

<div id="content">

<p>This page allows you to sponsor a particular runner. Just simply select the name of the runner you wish to sponsor from the drop down list, then enter the amount you wish to donate followed by a brief message for the runner and then your name. Once making a donation the runner you have sponsored will be notified by email that you have made a donation.</p>
<br/>
<br/>
<br/>
<br/>
<form method="post" action="test.php">
<table>

    <tr><td><label>Runner:</label></td>
    <td>
    <select name="fullname">
    <?php do{?>
    <option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
    <?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
    </select>
    </td>
    </tr>
    <tr><td><label>Donation (£):</label></td><td><input type="text" maxlength="9" value="0.00" name="donation"/></td></tr>
    <tr>
    <td>
        <label>Message:</label>
    </td>
    <td>
        <textarea  name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea>
    </td>
    </tr>
        </tr>
    <tr><td><label>Your Name:</label></td><td><input type="text" maxlength="30"  name="donator"/></td></tr>
    <tr>
    <td>
    <tr><td><input id="submit" type="submit" value="Confirm Donation"/></td></tr>
    </table>
</form>


</div>



</div> <!-- END WRAPPER -->

</body>

</html>

CSS
#content { text-align: left; margin: 2px; padding: 10px; }

#content p { font: font: 12px/1.5 Verdana, sans-serif; float: left; }

Answer 1

try to add a doctype : 尝试添加一个doctype：

for example, here is the HTML5 doctype 例如，这是HTML5文档类型

<!DOCTYPE html>

Answer 2

It seems to work fine for me. 对我来说似乎很好。

Maybe you have a problem in your css? 也许您的CSS有问题？

EDIT: The float style on your P tag is causing the trouble. 编辑：您的P标签上的浮动样式引起了麻烦。

A simple solution could be to use a defloating-break-div (I'm not sure what the proper name is) underneath your P tag: 一个简单的解决方案可能是在您的P标签下面使用defloating-break-div（我不确定确切的名字是什么）：

<div style="float:none;">
     <br />
</div>

This causes the rest of your code to resume the normal layout 这会使您的其余代码恢复正常布局

Answer 3

1) You have some errors in table structure 1）你在表结构上有一些错误

2) If you need to center table, you can setup it margin-left and margin-right auto. 2）如果需要居中放置表格，则可以将其设置为左边缘和右边缘自动。

There is possible table code with align: 可能有带有align的表代码：

<table style='margin: 0 auto;'>
<tr>
        <td><label>Runner:</label></td>
        <td>
<select name="fullname">
<?php do{?>
<option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
<?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
</select>
     </td>
</tr>
<tr>
        <td><label>Donation (£):</label></td>
        <td><input type="text" maxlength="9" value="0.00" name="donation"/></td>
</tr>
<tr>
        <td><label>Message:</label></td>
        <td><textarea  name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea></td>
</tr>
<tr>
        <td><label>Your Name:</label></td>
        <td><input type="text" maxlength="30"  name="donator"/></td>
</tr>
<tr>
        <td><input id="submit" type="submit" value="Confirm Donation"/></td>
        <td>&nbsp;</td>
</tr></table>

If you still have troubles: post somewhere full HTML and CSS code for detailed analysis. 如果仍有问题，请在某处张贴完整的HTML和CSS代码以进行详细分析。

表格在Firefox和Chrome中消失了

问题描述

3 个解决方案

解决方案1
1 2012-05-04 13:15:57

解决方案2
0 2012-05-04 13:21:07

解决方案3
0 2012-05-04 23:34:54

表格在Firefox和Chrome中消失了

问题描述

3 个解决方案

解决方案1 1 2012-05-04 13:15:57

解决方案2 0 2012-05-04 13:21:07

解决方案3 0 2012-05-04 23:34:54

解决方案1
1 2012-05-04 13:15:57

解决方案2
0 2012-05-04 13:21:07

解决方案3
0 2012-05-04 23:34:54