CSS中的居中表

-2

我正在尝试在表格中居中并碰到一个绊脚石。我终于在1排上有了桌子，但现在需要让他们居中而没有成功。我不确定问题是否始于显示：无。请帮我解决一下这个。CSS中的居中表

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

来源

2013-08-03 pepe_lepew1962

请勿将表格用于非制表数据。以内容为中心的 – Alan

取决于你真的想要得到什么居中。

您可以居中的3代表的内容与添加text-align: center;到table在CSS样式是这样的：

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

这将中心内，每3代这些表的一切。

或者你也可以居中整个形式 - 比如刚过</form>标签后<body>标签和</div>把<div class="master">。然后在你的样式表中加上：

.master { 
    margin: 0px auto; 
}

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

来源

2013-08-03 23:58:19 Mordor

，我想让表格居中，以便所有3个表格均匀分开。内容我可能会想离开，或第一列右侧和第二列离开，但我会担心后，我把他们分开。 –

在这种情况下，在每个'＃tabler'中放入'margin：10px;'并调整像素（10可能对您太啰嗦，试试更多...）。或者只是'＃tabler1，＃tabler2，＃tabler3 {margin：10px;}'，你会得到所有这些保证金（这是一个更短的记数法）。 – Mordor

是的，这可以工作30％和45％，但如果我改变这些数字，他们没有适当的间隔。我想我需要保证金：0 auto;某处使其均匀，但无法找到放在哪里。 –

CSS中的居中表

回答

相关问题