如何自定义html表格边框？

Question

我正在尝试创建一个表格，其中边框将显示为一个登录框。

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

会发生什么事，即使表格单元格有边框和边框很烂。我想删除单元格边框。边界只应该围绕桌子。我对此完全陌生。

在此先感谢。

Answer 1

使用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>中，以便使边界四处走动。

Answer 2

如果使用下面的CSS，

table { 
    border: thin solid black; 
} 

，这将使你身边只有表边框，您可以在http://jsfiddle.net/2CdwW/

Answer 3

使用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>