thとtableセクションを含む境界線

私はPHPとJSで私の最終プロジェクトを書いています。私はHTMLとCSSのスタイルに助けが必要です。thとtableセクションを含む境界線

これは私のサインフォームです。私は2つの点で助けが必要です。

私はボーダーを持っている間にすべての行（tr）を行いたいと思っています。今、私はすべてのthがボーダーを持っていることを知っています。
テーブルをセクションに分割し、他の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である：（1）、TRさんは唯一の国境を持つことができるために

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 עמית בן צור

たときに表border-collapse:collapseです。（2）の場合は、<thead>、<tbody>、<tfoot>セクションに行を配置し、それらを別々にスタイルすることができます。

多分<tbody>セクションがあり、nth-of-typeを使ってそれらを選択できますが、分かりません。

スタイルTBODY例

ボーダー崩壊などのHTMLでTHEAD、TBODY、TFOOTの下

加え

違い：
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

thとtableセクションを含む境界線

答えて

関連する問題