Question

我正在用PHP和JS编写我的最终项目。我需要有关html和CSS样式的帮助。

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

我想做包含th的边界的整行（tr），现在我知道只有每一个都有边框。
我想将表格划分为各个部分并为其他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;
}

Answer 1

对于（1），当表格为border-collapse:collapse时，tr只能有边框。对于（2），您可以将行放在<thead>，<tbody>，<tfoot>部分中，并将这些行分开设置。

也许你可以拥有多个<tbody＆gt;部分和使用类型的类型来选择它们但我不知道。

以下的差异

在html
style tbody为例
border-collapse：在表格样式上折叠
tr style on first tr

＆＃13;

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

＆＃13;

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

＆＃13;

包含th和表格部分的边框tr

1 个答案: