Почему таблица не соответствует моей команде CSS? - PullRequest
0 голосов
/ 18 марта 2020

Вот часть моего HTML кода.

<link rel="stylesheet" href="{% static "css/mystyle.css" %}"/>
  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
        <h1>Here are your patient records:</h1>
        <h2>Go to /formpage to fill the form</h2>

        {% if patients %}
            <table>
              <thead>
                <th>Patient Name</th>
                <th>Identity Document Number</th>
                <th>Date of Birth</th>
                <th>Date Case Confirmed</th>
                <th>Case Number</th>
              </thead>

              {% for pat in patients %}
                <tr>
                  <td>{{ pat.name }}</td>
                  <td>{{ pat.idn }}</td>
                  <td>{{ pat.date_of_birth }}</td>
                  <td>{{ pat.confirm_day }}</td>
                  <td>{{ pat.case_no }}</td>
                </tr>
              {% endfor %}
          </table>

Я хочу отредактировать таблицу в соответствии с моими правилами CSS.

h1{
  color: red;
}

table, td, th{
  border: 1px solid black;
}

table {
  border-collapse: collapse;
}

Однако таблица не учитывает изменения с CSS. Забавно то, что заголовок h1 фактически следует правилу CSS и имеет красный цвет. Чего мне не хватает?

Ответы [ 2 ]

0 голосов
/ 18 марта 2020

Ваш CSS будет применен к элементам таблицы, вы можете проверить это с помощью инструментов разработчика в вашем браузере.

Также рабочий пример вашей таблицы:

h1 {
  color: red;
}

table,
td,
th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
}
<h1>Here are your patient records:</h1>
<h2>Go to /formpage to fill the form</h2>
<table>
  <thead>
    <th>Patient Name</th>
    <th>Identity Document Number</th>
    <th>Date of Birth</th>
    <th>Date Case Confirmed</th>
    <th>Case Number</th>
  </thead>
  <tbody>
    <tr>
      <td>name</td>
      <td>idn</td>
      <td>date_of_birth</td>
      <td>confirm_day</td>
      <td>case_no</td>
    </tr>
    
    <tr>
      <td>name</td>
      <td>idn</td>
      <td>date_of_birth</td>
      <td>confirm_day</td>
      <td>case_no</td>
    </tr>
    
    <tr>
      <td>name</td>
      <td>idn</td>
      <td>date_of_birth</td>
      <td>confirm_day</td>
      <td>case_no</td>
    </tr>
  </tbody>
</table>
0 голосов
/ 18 марта 2020

Попробуйте проверить элемент таблицы и проверить, применяется ли ваш border: 1px solid black; к элементу (в окне проверки элемента, в поле css убедитесь, что текст не зачеркнут), если текст зачеркнут, попробуйте добавить ключевое слово !important рядом с black и перед ;.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...