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/找到一个jsfiddle

Answer 3

使用CSS将边框放在桌子上：

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

如何自定义html表边框？

3 个答案: