居中兩列的表與CSS

我有一個網站上看到以下頁面：居中兩列的表與CSS

<table class="form"> 
    <tbody> 
    <tr> 
    <td style="width:20%;"></td> 
    <th>User ID</th> 
    <td><input type="text" name="userid" id="userid" class="medium" value="" /></td> 
    <td style="width:20%;"></td> 
    </tr> 
    <tr> 
    <td></td> 
    <th>Password</th> 
    <td><input type="password" name="password" id="password" class="medium" /></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td></td> 
    <th><label for="remember">Remember my user ID</label></th> 
    <td><input type="checkbox" name="remember" id="remember" value="true" /></td> 
    <td></td> 
    </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
    <td colspan="3"><a href="forgot/">Forgot your user ID or password?</a></td> 
    <td><input type="submit" name="submit" id="submit" value="Login" /></td> 
    </tr> 
    </tfoot> 
    </table>

：

Screenshot

我已經加入他們周圍的兩列定義的寬度爲中心的兩列

有沒有辦法做到這一點，如果沒有寬度爲20％的邊上的兩個空列？

來源

2013-02-20 Tom

OT：請加'角色=「演示「'您的'

'標籤，所以輔助技術不會像普通表格那樣對待它，並且''在這裏不需要，並且使用不正確 – 2013-02-20 21:04:01

回答

<style> 
table.form { 
    width: 400px; /* or however wide you want it */ 
    margin: 0 auto; 
} 
</style>

然後可以使提交按鈕，將其置於自己的元素跨越整個寬度，如果你願意的話，或者你可以把它在表中一致的寬度。

來源

2013-02-20 20:58:42 DiMono

這樣做也可以使tfoot在那裏有按鈕400px我需要填寫應用程序的容器 – Tom 2013-02-20 21:01:39

我編輯了我的答案以解決該問題;） – DiMono 2013-02-20 21:02:41

啊，對。謝謝。 – Tom 2013-02-20 21:04:16

雖然你可以找到一個解決方案來解決表格問題，但我建議你不要使用它們，表格總是有問題的樣式。您可以使用不同的html元素（如div）完成此操作。只是考慮下一次:)

來源

2013-02-20 21:00:41

+1。這個。只是爲了澄清：表格是表格數據。不是佈局。 :) – 2013-02-20 21:01:36

是的，我正在使用其他人開發的CSS框架。這隻適用於一個屏幕，所以我一直在尋找避免爲單次使用添加新的樣式。懶得肯定。 – Tom 2013-02-20 21:10:57

定義元素的寬度要居中（用像素，EM-S，百分比..），並設置margin-left: automargin-right: auto將有助於

來源

2013-02-20 21:48:11 boksa

相關問題