-2

我试图在我的表格中居中表格并遇到了一个绊脚石。我终于把桌子放在了 1 行，但现在需要让它们居中但没有成功。我不确定问题是否始于我有显示的事实：无。请帮我解决一下这个。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="en"/>

<style type="text/css">

table { border: 1px solid white; width: 100%; }

#tabler1
{
border: 1px solid cyan;
width: 30%;
float: left;
}

#tabler2
{
border: 1px solid yellow;
width: 30%;
float: left;
}

#tabler3
{
border: 1px solid blue;
width: 30%;
float: left;
}

</style>
<title>Test Page</title>
</head>

<body>

         <form method="POST" action="--WEBBOT-SELF--">

               <table border="1" width="100%" bordercolor="#008000" id="table1">
                  <tr>
                     <td>
                        <input type=button VALUE="ADVANCED SEARCH">
                     </td>
                  </tr>

                     <tr>
                        <td id="tabler1">
                           <table width="100%" name="police_response1" >
                                 <tr>
                                    <th colspan="2">Table1</th>
                                 </tr> 
                                 <td>&nbspFIELD TEXT11</td>
                                 <td>
                                    <select size="1" name="D1">
                                       <option value="NONE">NONE</option>
                                       <option value="ONE">ONE</option>
                                       <option value="TWO">TWO</option>
                                       <option>THREE</option>
                                    </select>
                                 </td>

                              <tr> 
                                 <td>&nbspFIELD TEXT12</td>
                                 <td>
                                    <select size="1" name="D1">
                                       <option value="NONE">NONE</option>
                                       <option value="ONE">ONE</option>
                                       <option value="TWO">TWO</option>
                                       <option>THREE</option>
                                    </select>
                                 </td>
                              </tr>
                              <tr> 
                                 <td>&nbspFIELD TEXT13</td>
                                 <td>
                                    <select size="1" name="D1">
                                       <option value="NONE">NONE</option>
                                       <option value="ONE">ONE</option>
                                       <option value="TWO">TWO</option>
                                       <option>THREE</option>
                                    </select>
                                 </td>
                              </tr> 
                           </table> 
                        </td>

                        <td id="tabler2">
                           <table width="100%" name="police_response1" >
                                 <tr>
                                    <th colspan="2">Table2</th>
                                 </tr> 
                                 <td>&nbspFIELD TEXT21</td>
                                 <td>
                                    <select size="1" name="D1">
                                       <option value="NONE">NONE</option>
                                       <option value="ONE">ONE</option>
                                       <option value="TWO">TWO</option>
                                       <option>THREE</option>
                                    </select>
                                 </td>

                              <tr> 
                                 <td>&nbspFIELD TEXT22</td>
                                 <td>
                                    <select size="1" name="D1">
                                       <option value="NONE">NONE</option>
                                       <option value="ONE">ONE</option>
                                       <option value="TWO">TWO</option>
                                       <option>THREE</option>
                                    </select>
                                 </td>
                              </tr>
                              <tr> 
                                 <td>&nbspFIELD TEXT23</td>
                                 <td>
                                    <select size="1" name="D1">
                                       <option value="NONE">NONE</option>
                                       <option value="ONE">ONE</option>
                                       <option value="TWO">TWO</option>
                                       <option>THREE</option>
                                    </select>
                                 </td>
                              </tr> 
                           </table> 
                        </td>

                        <td id="tabler3">
                           <table width="100%" name="police_response1" >
                                 <tr>
                                    <th colspan="2">Table3</th>
                                 </tr>  
                                 <td>&nbspFIELD TEXT31</td>
                                 <td>
                                    <select size="1" name="D1">
                                       <option value="NONE">NONE</option>
                                       <option value="ONE">ONE</option>
                                       <option value="TWO">TWO</option>
                                       <option>THREE</option>
                                    </select>
                                 </td>

                              <tr> 
                                 <td>&nbspFIELD TEXT32</td>
                                 <td>
                                    <select size="1" name="D1">
                                       <option value="NONE">NONE</option>
                                       <option value="ONE">ONE</option>
                                       <option value="TWO">TWO</option>
                                       <option>THREE</option>
                                    </select>
                                 </td>
                              </tr>
                              <tr> 
                                 <td>&nbspFIELD TEXT33</td>
                                 <td>
                                    <select size="1" name="D1">
                                       <option value="NONE">NONE</option>
                                       <option value="ONE">ONE</option>
                                       <option value="TWO">TWO</option>
                                       <option>THREE</option>
                                    </select>
                                 </td>
                              </tr> 
                           </table> 
                        </td>
                     </tr>

               </table>

               <div style="clear:both;"></div>

         </form>


</body></html>

http://jsfiddle.net/pepelepe/CyqBn/5/

4

1 回答 1

0

取决于您真正想要居中的位置。

您可以将这 3 个表格的内容居中添加text-align: center;到tablein css 样式中，如下所示：

table {
   border: 1px solid white;
   width: 100%;
   text-align: center;
}

这将使这三个表中的所有内容居中。

或者您可以将整个表单居中 - 例如放在标签<div class="master">之后和标签之后。然后在你的样式表中放这个：<body></div></form>

.master {
   margin: 0px auto;
}

这应该使表单本身在文档中居中。

于 2013-08-03T23:58:19.067 回答