如何在此表中将边框设置为0

Question

在上图中，First Name和Textfield未从左侧对齐。我不知道它的边界或填充物。但是里面的图像是条件可见的。如何通过html和css摆脱它。

<div id=first_name>
    First Name<br />
    <table>
        <tr>
            <td><img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' /></td>
            <td><input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" /></td>
        </tr>
        <tr>
            <td colspan="2"><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span></td>
        </tr>
    </table>
</div><!-- eof first_name -->

Answer 1

问题在于，即使您隐藏了图片，仍然有一个<td>元素，我对代码进行了一些更改，我将名字放入<td>以与之对齐你的意见。还将其包裹在标签中。我删除了图像所在的td，您可以将其放在与输入相同的单元格中，或者使用javascript动态添加它并将其完全取出（这将是我的方法）。

<div id=first_name>
<table>
<tr>
  <td>
   <label for='form_first_name'>First Name:</label>
  </td>
</tr>
<tr>

  <td><img src='images/form_error.png' class="error_image"     id="form_first_name_err_img" style='display: none;' /><input align="middle"     id="form_first_name" class="form_field1" type="text" name="first_name" />
  </td>

</tr>
<tr>
  <td><span class="error_msg" id="form_first_name_err_msg"     style='display: none'>This cannot be left blank.</span></td>
</tr>
</table>
</div><!-- eof first_name -->

Answer 2

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td>
         <img src='images/form_error.png' class="error_image" 
                    id="form_first_name_err_img" style='display: none' />
     </td>
     <td>
         <input align="middle" id="form_first_name" class="form_field1" 
                            type="text" name="first_name" />
      </td>
</tr>
<tr>
     <td colspan="2">
          <span class="error_msg" id="form_first_name_err_msg"
              style='display: none'>This cannot be left blank.
          </span>
     </td>
 </tr>
</table>

试试这个

Answer 3

在表格标签中将边框设置为0，如下所示

<table  border="0">

Answer 4

虽然在大多数（向后兼容的）浏览器中放置过时的<table cellspacing="0" cellpadding="0">仍会产生足够好的结果，但HTML5中不支持属性cellpadding和cellspacing，也不应该使用。

而是在样式表中添加这样的内容：

#first_name table { 
    border-collapse: collapse;
    border-spacing: 0;
}
#first_name td {
    padding: 0;
}
#first_name input { 
    margin: 0;
}

当然，您可以向元素添加类并相应地更新样式表。

提示：对于未来类似的问题，请尝试在您选择的浏览器中使用开发工具，并调查对元素应用的默认样式，以便您可以相应地进行调整。

Answer 5

<强> HTML

<div id="first_name">First Name</div>
<table class="tables" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' />
        </td>
        <td>
            <input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
        </td>
    </tr>
    <tr>
        <td colspan="2"><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span>

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

Demo

或

<强> HTML

<div id="first_name">
<table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td>First Name:
        </td>
    </tr>
    <tr>
         <td>
            <input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
        </td>
        <td>
            <img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' />
        </td>

    </tr>
    <tr>
        <td colspan="2"> <span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank. </span>
  </td>
    </tr>
</table>
    </div>

Demo