enter image description here 如何在此表中将边框设置为0

在上图中，名字和文本字段从左侧未对齐。我不知道它的边框还是填充。但里面的图像是有条件可见的。如何摆脱它只是由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 -->

来源

2014-01-13 Pradyumn Shrivastava

您的意思是保证金，而不是边界的权利？ – Huey

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

试试这个

来源

2014-01-13 04:59:33

我不明白...请告诉我背后的原因 –

HTML5不支持'table'元素的'callpadding'和'cellspacing'属性 – Floremin

组边框为0表标签如下图所示

<table border="0">

来源

2014-01-13 05:05:17 Kamlesh

虽然把古老：<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; 
}

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

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

来源

2014-01-13 05:07:01 Floremin

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

OR

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

来源

2014-01-13 05:08:38

的问题是，即使你有隐藏的图像，还有一个<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 -->

来源

2014-01-13 05:09:08 codeaddict

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

回答

Demo

OR

Demo

相关问题