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

相關問題