Question

我试图将表格放在我的表格中，并遇到了绊脚石。我终于将表格排在第一行，但现在需要让它们居中而不成功。我不确定问题是否始于我有display：none。请帮帮我。

<!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/

Answer 1

取决于你真正想要集中注意力的内容。

您可以将{3}的内容添加到text-align: center;的css样式中，如下所示：

table

这将把所有这三个表中的所有内容都集中在一起。

或者您可以将整个表单置于中心位置 - 例如，在table { border: 1px solid white; width: 100%; text-align: center; }代码后面添加<div class="master">，在<body>代码后面添加</div>。然后在你的样式表中输入：

</form>

这应该将表单本身放在文档中。

CSS中的中心表

1 个答案: