Пограничная проблема с CSS / HTML;CSS применяет таблицу, но не границы - PullRequest
Новая
       12

Пограничная проблема с CSS / HTML;CSS применяет таблицу, но не границы

0 голосов
/ 02 мая 2019

Я применяю внешний CSS к проекту HTML, чтобы включить границы в форматирование для таблицы. Все относится к моему столу, кроме границы, несмотря ни на что.

Я пытался применить table {}, а также table, th, td {}

  table,
th,
td {
  border-collapse: collapse;
  border: 2px #022D41;
  background-color: #DAECF3;
  text-align: center;
  margin: auto;
  table {
    border-collapse: seperate;
    width: 2;
    background-color: "#1AA6B7";
    border: 2px "#FE424D";
    text-align: center;
    margin: auto;
    /*aligning table to the center*/
  }
  th {
    border: 3px "#FE424D";
    background-color: "#022D41";
    color: #DAECF3;
  }
  td {
    border: 3px "#FE424D";
  }
<table border="4">
  <tr>
    <th>Company</th>
    <th>Location</th>
    <th>Dates Employed</th>
    <th>Title/Duties</th>
  </tr>
  <tr>
    <td>Mercury Systems</td>
    <td>Hudson, NH</td>
    <td>May 20, 2019 - <br>Current</td>
    <td>Continous<br> Improvement<br> Intern</td>
  </tr>
  <tr>
    <td>Manchester<br> Public Schools</td>
    <td>Manchester, NH</td>
    <td>January 2017 - <br>August 2018</td>
    <td>Para-Professional</td>
  </tr>
  <tr>
    <td>Penobscot<br>Indian Island</td>
    <td>Old Town, ME</td>
    <td>November 2015 - <br>January 2017</td>
    <td>Youth Program<br>Coordinator</td>
  </tr>
</table>

Попытка сделать пунктирную / сплошную границу вокруг и между столом.

Ответы [ 3 ]

1 голос
/ 02 мая 2019

Вы должны добавить стиль границы, как уже сказал другой человек, но порядок это {size} {style} {color}.

Две основные причины, по которым ваш код не работает: вы забыли закрыть первое правило table и порядок аргументов для правила border.

Например: border: 2px solid #FFFFFF.И вы не должны использовать цвет как "#FFFFFF" (уберите кавычки). 

table,
th,
td {
  border-collapse: collapse;
  border: 2px solid #022D41;/* add the border style (solid) */
  background-color: #DAECF3;
  text-align: center;
  margin: auto;
} /* You've forgot to close this rule */

table {
  border-collapse: seperate;
  width: 2;
  background-color: #1AA6B7; /* remove the "" */
  border: 2px solid #FE424D; /* remove the "" and add the border-style */
  text-align: center;
  margin: auto; /*aligning table to the center*/
}

th {
  border: 3px solid #FE424D; /* remove the "" and add the border-style */
  background-color: "#022D41"; /* remove the "" */
  color: #DAECF3; /* you're using the same backgorund-color as the text color */
  color: #000;
}

td {
  border: 3px solid #FE424D; /* add the border style and remove the "" */
}
<table border="4">
  <tr>
    <th>Company</th>
    <th>Location</th>
    <th>Dates Employed</th>
    <th>Title/Duties</th>
  </tr>
  <tr>
    <td>Mercury Systems</td>
    <td>Hudson, NH</td>
    <td>May 20, 2019 - <br>Current</td>
    <td>Continous<br> Improvement<br> Intern</td>
  </tr>
  <tr>
    <td>Manchester<br> Public Schools</td>
    <td>Manchester, NH</td>
    <td>January 2017 - <br>August 2018</td>
    <td>Para-Professional</td>
  </tr>
  <tr>
    <td>Penobscot<br>Indian Island</td>
    <td>Old Town, ME</td>
    <td>November 2015 - <br>January 2017</td>
    <td>Youth Program<br>Coordinator</td>
  </tr>
</table>
https://developer.mozilla.org/en-US/docs/Web/CSS/border
0 голосов
/ 02 мая 2019

Пример: 

.table_dark {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 14px;
    width: 640px;
    text-align: left;
    border-collapse: collapse;
    background: #311B92;
    border: 7px solid red;
}
.table_dark th {
  color: #EDB749;
  border-bottom: 1px dotted #37B5A5;
  border-right: 1px dotted #37B5A5;
  padding: 12px 17px;
}
.table_dark td {
  color: #CAD4D6;
  border-bottom: 1px dotted #37B5A5;
  border-right: 1px dotted #37B5A5;
  padding: 7px 17px;
}
.table_dark tr:last-child td {
  border-bottom: none;
}
.table_dark td:last-child {
  border-right: none;
}
.table_dark tr:hover td {
  text-decoration: underline;
}
<table class="table_dark">
  <tr>
    <th>Company</th>
    <th>Location</th>
    <th>Dates Employed</th>
    <th>Title/Duties</th>
  </tr>
  <tr>
    <td>Mercury Systems</td>
    <td>Hudson, NH</td>
    <td>May 20, 2019 - <br>Current</td>
    <td>Continous<br> Improvement<br> Intern</td>
  </tr>
  <tr>
    <td>Manchester<br> Public Schools</td>
    <td>Manchester, NH</td>
    <td>January 2017 - <br>August 2018</td>
    <td>Para-Professional</td>
  </tr>
  <tr>
    <td>Penobscot<br>Indian Island</td>
    <td>Old Town, ME</td>
    <td>November 2015 - <br>January 2017</td>
    <td>Youth Program<br>Coordinator</td>
  </tr>
</table>
0 голосов
/ 02 мая 2019

Я считаю, что вам нужно добавить solid или dotted к свойству border, чтобы оно появилось. В вашем случае вам потребуется:

border: solid 2px "#FE424D";

для сплошной границы или

border: dotted 2px "#FE424D";

для пунктирной.

...