包括 th 和 table 部分的边框 tr答案

【问题标题】：Border tr that include th and table section包括 th 和 table 部分的边框 tr
【发布时间】：2017-11-23 13:03:55
【问题描述】：

我正在编写 PHP 和 JS 的最后一个项目。我需要 html 和 CSS 样式方面的帮助。

这是我的签名表，我需要两件事上的帮助。

我想做包括 th 的整行 (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：

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

【问题讨论】：

标签： html css html-table border

【解决方案1】：

对于 (1)，tr 只能在表格为border-collapse:collapse 时有边框。对于 (2)，您可以在 <thead>、<tbody>、<tfoot> 部分中放置行并分别设置它们的样式。

也许您可以有多个 <tbody> 部分并使用 nth-of-type 来选择它们，但我不知道。

下面的区别

在html中添加thead、tbody、tfoot
以样式 tbody 为例
border-collapse:折叠表格样式
第一个 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>

【讨论】：