Таблица CSS не отображается вообще - PullRequest
Новая
       2

Таблица CSS не отображается вообще

0 голосов
/ 20 декабря 2018

У меня есть этот простой HTML-код.Я просто пытаюсь отформатировать цвета, но ни один из CSS на самом деле не форматирует его.

Я пытался изменить имена переменных, изменить класс таблицы на id и наоборот. 

<head>
    <style>
    .cool-table {
        width: 500px;
        border: 1px solid #000;
        background-color: blue;
        color: purple;
    }

    .cool-table tr:first-child td {
        font-size: 30px;
        background-color: red;
        color: green;
    }

    #cell-style {
        font-size: 8px;
        text-align: left;
    }
    </style>
</head>

<html>
    <body>
        <table class="cool-table">
            <tr>
                <th id="cell-style">Fruit</th>
                <th id="cell-style">Price</th>
            </tr>

            <tr>
                <th id="cell-style">Apples</th>
                <th id="cell-style">$10</th>
            </tr>

            <tr>
                <th id="cell-style">Banana</th>
                <th id="cell-style">$50</th>
            </tr>

            <tr>
                <th id="cell-style">Mango</th>
                <th id="cell-style">$20</th>
            </tr>
        </table>
    </body>
</html>

Он должен показывать весь фон таблицы синим цветом, а текст должен быть фиолетовым.Текст в первой строке должен быть большим с красным фоном и зеленым текстом.Остальные ячейки должны иметь синий фон с фиолетовым текстом и шрифтом размером 8 пикселей.

Ответы [ 3 ]

0 голосов
/ 20 декабря 2018

Измените ваши ячейки заголовка на th, а обычные ячейки на td.Таким образом, вам не нужен идентификатор, класс или tr:first-child, чтобы отделить строку заголовка от остальных.Обратите внимание, что если вы используете id, вы должны использовать его только для одного тега HTML.Для нескольких тегов используйте class вместо.

<html>

<head>
  <style>
    .cool-table {
      width: 500px;
      border: 1px solid #000;
      background-color: blue;
      color: purple;
    }
    
    .cool-table th { /* Changed to th, no need for tr:first-child */
      font-size: 30px;
      background-color: red;
      color: green;
    }
    
    .cool-table td { /* Styling td-tags (table cells) */
      font-size: 8px;
      text-align: left;
    }
  </style>
</head>

<body>
  <table class="cool-table">
    <tr>
      <th>Fruit</th> <!-- Keep as th -->
      <th>Price</th>
    </tr>

    <tr>
      <td>Apples</td> <!-- Changed to td -->
      <td>$10</td>
    </tr>

    <tr>
      <td>Banana</td>
      <td>$50</td>
    </tr>

    <tr>
      <td>Mango</td>
      <td>$20</td>
    </tr>
  </table>
</body>

</html>
0 голосов
/ 20 декабря 2018

Есть несколько вопросов, на которые стоит обратить внимание. Тег

  1. style принадлежит тегу head, который принадлежит тегу html.
  2. Вы не можете использоватьнесколько id s в одном документе - они должны быть уникальными .Попробуйте использовать class, как показано ниже.
  3. второй блок css ничего не делает.Может быть, вы хотите удалить td из селектора, как показано ниже?
  4. Некоторые из ваших стилей не применяются, потому что они перекрывают друг друга.Попробуйте сделать селекторы более конкретными, чтобы дать им более высокий приоритет.

Вы действительно хотите понять структуру HTML-документов .Вы можете проверить их, используя w3 validator

Вы также можете узнать больше о CSS от Mozilla .

<!doctype html>
    <html><head>
    
      <style>
          
      .cool-table {
        width: 500px;
        border: 1px solid #000;
        background-color: blue;
        color: purple;
    }
    
    .cool-table tr:first-child { /* removed 'td' */
        font-size: 30px;
        background-color: red;
        color: green;
    }
    
    .cell-style { /* changed to class */
        font-size: 8px;
        text-align: left;
        color: yellow;
    }
    
      </style>
      </head><body>
    
        <table class="cool-table">
            <tr>
                <th class="cell-style">Fruit</th>
                <th class="cell-style">Price</th>
            </tr>
    
            <tr>
                <th class="cell-style">Apples</th>
                <th class="cell-style">$10</th>
            </tr>
    
            <tr>
                <th class="cell-style">Banana</th>
                <th class="cell-style">$50</th>
            </tr>
    
            <tr>
                <th class="cell-style">Mango</th>
                <th class="cell-style">$20</th>
            </tr>
        </table>
        </body>
    </html>
0 голосов
/ 20 декабря 2018

Вы можете просто сделать это так: 

.cool-table {
  width: 500px;
  border: 1px solid #000;
  background-color: blue;
  color: purple;
}

.cool-table tr:first-child {
  background-color: red;
  color: green !important;
}

.cool-table tr:not(:first-child) {
  font-size: 8px;
  text-align: left;
}
<table class="cool-table">
  <tr>
    <th>Fruit</th>
    <th>Price</th>
  </tr>

  <tr>
    <th>Apples</th>
    <th>$10</th>
  </tr>

  <tr>
    <th>Banana</th>
    <th>$50</th>
  </tr>

  <tr>
    <th>Mango</th>
    <th>$20</th>
  </tr>
</table>

Первый ребенок имеет красный фон и зеленый цвет, и все, что НЕ первый ребенок, получает размер шрифта 8 и выравнивается повлево.

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

Нет похожих вопросов

...