邊框tr包括th和表格部分

我正在寫我的最終項目在PHP和JS。我需要html和CSS樣式的幫助。邊框tr包括th和表格部分

這是我的簽名表單，我需要兩件事幫助。

我想這樣做，整個行（tr），包括th while邊界，現在我知道只有每一個有邊界。
我想將表格分成幾個部分並在其他CSS代碼中對每個部分進行樣式設置。

我該怎麼辦？

這是我的HTML代碼：

<body> 
    <form> 
     <table id="t"> 
      <tr> 
       <th>Basic info</th> 
       <th>Contact info</th> 
       <th>About me</th> 


      </tr> 

      <tr> 
       <td><input placeholder="First name"></td> 
       <td><input placeholder="Phone"></td> 
       <td rowspan="3"><textarea rows="8" placeholder="About me"></textarea></td> 
      </tr> 

      <tr> 
       <td><input placeholder="Last name"></td> 
       <td><input placeholder="Area"></td> 
      </tr> 

      <tr> 
       <td><input placeholder="Degree"></td> 
       <td><input placeholder="Email"></td> 
      </tr> 

      <tr><th colspan="2">Social networks</th></tr> 
      <tr> 
       <td><input row placeholder="Facebook link"></td> 
       <td><input row placeholder="Website link"></td> 
      </tr> 
      <tr> 
       <td><input row placeholder="Twitter link"></td> 
       <td><input row placeholder="Medium link"></td> 
      </tr> 
      <tr> 
       <td><input row placeholder="Instagram link"></td> 
       <td><input row placeholder="Google link"></td> 
      </tr> 

      <tr><td colspan="2"><button type="submit">שלח</button></td></tr> 

     </table> 
    </form> 
</body>

這是我的CSS：

table{ 
    margin: 16px; 
    text-align: center; 
} 
td{ 
    padding: 10px; 
    justify-content: space-between; 
} 
#t textarea{ 
    width: 100%; 
    height: 100%; 
} 
tr>th{ 
    margin-top: 10px; 
    border: 1px solid red; 
}

來源

2017-06-20 עמית בן צור

對於（1），TR的只能有邊框當表是border-collapse:collapse。對於（2），您可以將行分別放置在<thead>,<tbody>,<tfoot>部分並對其進行設置。

也許你可以有多個<tbody>部分，並使用nth-type來選擇它們，但我不知道。

差異在下面

此外THEAD，TBODY，TFOOT在HTML
風格TBODY作爲一個例子
邊界崩潰：上表樣式崩潰
TR風格上第一TR

table { 
 
    margin: 16px; 
 
    text-align: center; 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    padding: 10px; 
 
    justify-content: space-between; 
 
} 
 

 
#t textarea { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
tbody { 
 
    font-style: italic; 
 
}

<form> 
 
    <table id="t"> 
 
    <thead> 
 
     <tr style="border:solid 1px"> 
 
     <th>Basic info</th> 
 
     <th>Contact info</th> 
 
     <th>About me</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <input placeholder="First name"> 
 
     </td> 
 
     <td> 
 
      <input placeholder="Phone"> 
 
     </td> 
 
     <td rowspan="3"> 
 
      <textarea rows="8" placeholder="About me"></textarea> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <input placeholder="Last name"> 
 
     </td> 
 
     <td> 
 
      <input placeholder="Area"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <input placeholder="Degree"> 
 
     </td> 
 
     <td> 
 
      <input placeholder="Email"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <th colspan="2">Social networks</th> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <input row placeholder="Facebook link"> 
 
     </td> 
 
     <td> 
 
      <input row placeholder="Website link"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <input row placeholder="Twitter link"> 
 
     </td> 
 
     <td> 
 
      <input row placeholder="Medium link"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <input row placeholder="Instagram link"> 
 
     </td> 
 
     <td> 
 
      <input row placeholder="Google link"> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    <tfoot> 
 
     <tr> 
 
     <td colspan="2"> 
 
      <button type="submit">שלח</button> 
 
     </td> 
 
     </tr> 
 
    </tfoot> 
 

 
    </table> 
 
</form>

來源

2017-06-21 18:12:33 dgrogan

邊框tr包括th和表格部分

回答

相關問題