在css上，带id的表格不显示td和tr的边框。

Question

我有一个id为#search_form的表。

当我写下这个

table#search_form, tr#search_form, td#search_form, th#search_form {
    height: 2em;
    word-wrap: break-word;
    border: 10px solid black;
}

它只显示表格周围的边框，不显示tr、td或th的边框。

但当我写下这个。

table, tr, td {
    border: 10px solid black;
}

任何表的边框都会显示在tr和td周围 但我只想在有特定id的表上显示边框。

为什么不工作？

我试着在css中制作单独的块，比如tr#search_form { .... }，但也不行。

我试着把逗号去掉，再把id标签去掉，但也不行。

为什么会出现这种情况？

下面是HTML表格。

<table id="search_form">
          <form method = "get">
              <tr>
          <th>
              <label>Search in file database </label>
              <br><input type="search" name="query" placeholder="Search" maxlength="45">
             <br><button type="submit" name="search" value="search">Search</button>
          </th>
          <td>
                  <label for="start">Start date range:</label>
                  <br><input type="date" id="from date" name="from-date"
                             value=""
                             min="2020-03-01" max="">
              <br><label for="end">End date range:</label>
              <br><input type="date" id="to date" name="to-date"
                         value=""
                         min="2020-03-01" max="">
          </td>
                  <td>
                  </td>
          </form>
          <form method = "get">
              <th>
                  <label>Tags search</label>
                  <br><input type="text" name="tags" data-role="tagsinput" placeholder="tag1,tag2,tag3">
                  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
                  <script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
                  <br><button type="submit" name="search" value="tagssearch">Search</button>
              </th>
              <td>
              <input type="checkbox" name="andcondition" value="1">
              Check if you want each file to include all tags (AND condition)
              </td>
              </tr>
          </form>
      </table>

Answer 1

下面的代码只在id为search_form的表上放置了一个边框，并且在th和td子表周围也放置了一个边框。

#search_form {
   height: 2em;
   word-wrap: break-word;
   border: 10px solid black;
}

#search_form th {
  border: solid 5px black
}

#search_form td {
  border: solid 5px black
}

小建议，我会把id名称用大写，因为这是HTML的惯例。

那么你的HTML可以是:

<table id="search-form">
   ...
</table>