Блог

Главная - Вопросы по программированию - Цвета границы заголовка таблицы не меняются

Цвета границы заголовка таблицы не меняются

#css

#css

Вопрос:

Я пытаюсь придать заголовку моей таблицы другой цвет, но границы остаются оригинального цвета. введите описание изображения здесь

Это мой CSS

  .dashboard th {
        background-color: green;
        border: 0px solid green;
        white-space: nowrap;
        color: black;
        text-align: left;
    }

Почему границы не меняют цвет?

Комментарии:

1. Это может привести к потере приоритета css, кешированию и т.д. В любом случае, можем ли мы также просмотреть ваш html?

2. Можете ли вы добавить класс к строкам, которые хотите изменить на зеленый, и настроить цвет всей строки? Вы также могли бы добавить border-spacing:0 в правила таблицы

3. Я попытаюсь получить HTML, но он генерируется во время выполнения, поэтому добраться до него немного сложно

Ответ №1:

Вы можете добавить border-collapse свойство к таблице, чтобы уменьшить границы:

 .dashboard{
  border-collapse: collapse;
}

.dashboard th {
  background-color: green;
  border: 0px solid green;
  white-space: nowrap;
  color: black;
  text-align: left;
}  
 <table class="dashboard">
  <tr>
    <th>Should be green border</th>
    <th>Should be green border</th>
    <th>Should be green border</th>
  </tr>
</table>

Затем вы можете указать собственную ширину границы:

 .dashboard {
  border-collapse: collapse;
}

.dashboard th {
    background-color: green;
    border: 5px solid red; /* Just for demo */
    white-space: nowrap;
    color: black;
    text-align: left;
}  
 <table class="dashboard">
  <tr>
    <th>Should be green border</th>
    <th>Should be green border</th>
    <th>Should be green border</th>
  </tr>
</table>

Ответ №2:

В вашем вопросе есть два момента:

  1. если вы установите border:0 , он не получит цвет.
  2. в таблицах вы должны использовать border-collapse: collapse; для устранения пробелов, как показано на вашем снимке. Я думаю, что следующее исправление справилось бы с этой задачей:

 table.dashboard {
  border-collapse: collapse;
  border: 1px solid green;
  background: #fff;
}

table.dashboard td {
  border: 1px solid #bbb;
}

table.dashboard th {
  background-color: green;
  border: 1px solid black;
  white-space: nowrap;
  color: black;
  text-align: left;
}





/* just to tidy the page, not part of the answer ;) */

body {
  margin: 0;
  padding: 0;
  background: #f2f2f2;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}  
 <div class="container">
  <table class="dashboard">
    <tr>
      <th>header 1</th>
      <th>header 2</th>
      <th>header 3</th>
      <th>header 4</th>
    </tr>
    <tr>
      <td>item 1</td>
      <td>item 2</td>
      <td>item 3</td>
      <td>item 4</td>
    </tr>
    <tr>
      <td>item 1</td>
      <td>item 2</td>
      <td>item 3</td>
      <td>item 4</td>
    </tr>
    <tr>
      <td>item 1</td>
      <td>item 2</td>
      <td>item 3</td>
      <td>item 4</td>
    </tr>
    <tr>
      <td>item 1</td>
      <td>item 2</td>
      <td>item 3</td>
      <td>item 4</td>
    </tr>
  </table>
</div>

Ответ №3:

Измените border: style=»border: 0px;» сплошным зеленым; на border: 1px сплошным зеленым; или вы хотите увеличить пиксель в соответствии с вашими потребностями.

      .dashboard th {
    background-color: green;
    border: 1px solid green;
    white-space: nowrap;
    color: black;
    text-align: left;
}