Цвет фона в таблице не отображается для пустых ячеек - PullRequest
Новая
       10

Цвет фона в таблице не отображается для пустых ячеек

2 голосов
/ 26 марта 2020

Screenshot of the issue

У меня есть таблица, в которой я задал серый фоновый цвет для каждой второй строки. Как мне захватить пустые клетки здесь? И почему они не фиксируются в этом css: 

tr:nth-child(even) {
  background-color: #dddddd; 
}

Выполнение команды td: empty не захватывает блоки, так что я немного озадачен.

Вот html

      <td>
        <tr>
          <td colspan="2">
            <input type="text" placeholder="Add new email" v-model="email" />
            <img @click="addEmailToQ" src="@/assets/Plus.png" />
          </td>
        </tr>
        <!-- <h2>Emails</h2> -->
        <tr style="text-align: left" v-for="(email, key) in emailList" :key="key">
          {{email}}
        </tr>
      </td>

Ответы [ 2 ]

2 голосов
/ 26 марта 2020

Относительно вашей "ошибки": это не имеет ничего общего с CSS, ваша разметка просто неверна. <tr> необходимо заключить в <td>, а не наоборот.

Читайте HTML Таблицы здесь: https://www.w3schools.com/html/html_tables.asp

Пример кода ниже: Пустые ячейки будут иметь заданный фоновый цвет с CSS, если дана правильная разметка. 

table {
  width:100%;
}

tr:nth-child(even) {
  background-color: #dddddd; 
}
<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td></td>
    <td></td>
  </tr>
</table>
1 голос
/ 26 марта 2020

Убедитесь, что вы включаете <td> во все ячейки, даже пустые <td> </td>

tr:nth-child(even) {
        background-color: #dddddd;
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td></td>
        <td>Smith</td>
        <td></td>
      </tr>
      <tr>
        <td>Eve</td>
        <td></td>
        <td>94</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td></td>
        <td>94</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td></td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td></td>
        <td>94</td>
      </tr>
    </table>
  </body>
</html>
...