Таблица с идентификатором не показывает границы вокруг td и tr на css - PullRequest
Новая
       6

Таблица с идентификатором не показывает границы вокруг td и tr на css

0 голосов
/ 06 мая 2020

У меня есть таблица с идентификатором # 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 тоже. Но мне нужны границы только для таблицы с определенным c 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>

1 Ответ

1 голос
/ 06 мая 2020

Следующий код помещает границу только в таблицы с идентификатором 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
}

Небольшое предложение. соглашение для HTML.

Тогда ваш HTML может быть: 

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