的 Updated Fiddle

Question

我设计了如下表格。我需要避免用户名和它的文本框之间的空格，如密码和文本框。请告诉我怎么做？

<table>
  <tr>
    <td>
      UserName
    </td>
    <td style="text-align:left">
      <input id="userName" type="text" value="" placeholder="UserName" />   
    </td>
  </tr>
  <tr>
    <td>
      password
    </td>
    <td style="text-align:left">
      <input id="password" type="text" value="" placeholder="password" />   
    </td>
  </tr>
  <tr>
    <td colspan="2" style="text-align:left">
      <input  id="btnsearch" type="button" value="Search" />
    </td>
  </tr>
</table>

在用户名和文本框之间有一些额外的空间，与密码和密码文本框相同。如何缩小它们之间的空间请告诉我。

Answer 1

table element可以使用边框宽度，cellpadding和cellspacing来归结。

enter image description here

所以你可以创建一个像这样的表（其中单位数字没有长度，意味着不是2px但是2）：

<table border="0" cellpadding="0" cellspacing="0">

TABLE的属性列表：摘要％文字;宽度长度; border％Pixels; frame％TFrame;规则％TRules; cellspacing％Length; cellpadding％Length;

但是最近的网页设计技术，建议将html标记与布局和设计元素分开。要实现这一点，您必须使用css。

你可以这样做：

table {border-spacing:0;border-width:0;}
table td {padding:2px;border-width:0;}

使用css，您还必须指定边框是折叠还是分开，这将对“边框间距”产生影响。

table {border-collapse: collapse;}

为了避免一些传统的browswers错误，我邀请你不要在结束</td>之前留下一个空的空间，如：<input id="btnsearch" type="button" value="Search"/></td>（但这会过时，除非你为老年人开发）

总结你的情况：

table {border-collapse:collapse;border-spacing:0;border:0 none;}
/* fix padding of TD to suit your needs */
table td {border:0 none;padding:2px;text-align:left;}

您将能够以最简单的方式格式化表格：

<table>
    <tr>
        <td></td>
    </tr>
</table>

Answer 2

cellSpacing，cellPadding和border可以帮助您实现这一目标：

   <table cellSpacing="0" cellPadding="0" border="0" style="border-collapse:collapse;">
        <tr>
                <td style="text-align:left">
                  UserName<br/>
                 <input id="userName" type="text" value=""  placeholder="UserName"/>   
                </td>
        </tr>
        <tr>
                <td style="text-align:left">
                 password<br/>
                 <input id="password" type="text" value=""  placeholder="password"/>   
                </td>
            </tr>
            <tr>
             <td colspan="2" style="text-align:left">
             <input  id="btnsearch" type="button" value="Search"/>
            </td>
            </tr>
        </table>

如果您需要它们紧密关闭，请将它们放在同一个td上并执行换行<br/>。

Answer 3

在表标记中添加少量属性，如

<table cellSpacing='0' cellPadding='0'>

Answer 4

<强> Your Fiddle

已编辑的部分：

<table cellSpacing='0' cellPadding='0'  border="0" >

的 Updated Fiddle

了解有关CellSpacing＆amp ;;的更多信息CellPadding Click Here

如何减少表html中td之间的空间？

4 个答案:

的 Updated Fiddle