时间戳

首页 > 解决方案 > 带有 id 的表在 css 上不显示 td 和 tr 周围的边框

css - 带有 id 的表在 css 上不显示 td 和 tr 周围的边框

问题描述

我有一个 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>

标签： csshtml-table

解决方案

以下代码仅在 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
}

小建议我会 kebab-case id 名称，因为这是 HTML 的约定。

那么你的 HTML 可能是：

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

推荐阅读