如何自定義html表格邊框？

我正在嘗試創建一個表格，其中邊框將顯示爲一個登錄框。如何自定義html表格邊框？

<table border="1"> 
<tr> 
    <td>Username: </td> 
    <td><input type="text" name="username" /></td> 
</tr> 
<tr> 
    <td>Password: </td> 
    <td><input type="password" name="password" /></td> 
</tr> 
<tr> 
    <td><input type="submit" value="Log In" /></td> 
</tr> 
</table>

會發生什麼事，即使表格單元格有邊框和邊框很爛。我想刪除單元格邊框。邊界只應該圍繞桌子。我對此完全陌生。

在此先感謝。

來源

2011-06-15 Son of Man

使用CSS

<style type="text/css"> 
.loginbox { 
    border-collapse: collapse; 
    border-width: 1px; 
    border-style: solid 
} 
</style> 

<table class="loginbox"> 
<tr> 
    <td>Username: </td> 
    <td><input type="text" name="username" /></td> 
</tr> 
<tr> 
    <td>Password: </td> 
    <td><input type="password" name="password" /></td> 
</tr> 
<tr> 
    <td colspan="2"><input type="submit" value="Log In" /></td> 
</tr> 
</table>

僅供參考：我將colspan="2"添加到您的最後一個<td>中，以便使邊界四處走動。

來源

2011-06-15 03:14:16 Asaph

Wham !!!有效！！！非常感謝... – 2011-06-15 03:15:02

@男人之聲：不客氣。請點擊答案左邊的複選框標記此答案。 – Asaph 2011-06-15 03:15:55

好吧......它只是說我必須等待幾分鐘...... – 2011-06-15 03:17:07

如果使用下面的CSS，

table { 
    border: thin solid black; 
}

，這將使你身邊只有表邊框，您可以在http://jsfiddle.net/2CdwW/

來源

2011-06-15 03:13:01

使用CSS看到它的jsfiddle把邊界上表代替：

<table style="border: 1px solid black"> 
    <tr> 
      <td>Username: </td> 
      <td><input type="text" name="username" /></td> 
    </tr> 
    <tr> 
      <td>Password: </td> 
      <td><input type="password" name="password" /></td> 
    </tr> 
    <tr> 
      <td colspan="2"><input type="submit" value="Log In" /></td> 
    </tr> 
</table>

來源

2011-06-15 03:13:33

如何自定義html表格邊框？

回答

相關問題