CSS/HTML 的边框问题； CSS应用表格但不应用边框

Question

我正在将外部 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>

尝试在表格周围和表格之间添加虚线/实线边框。

Answer 1

你必须像其他人所说的那样添加边框的样式，但顺序是{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

Answer 2

我相信你需要在border属性中添加solid或dotted才能让它出现。在您的情况下，您需要：

border: solid 2px "#FE424D";

用于实线边框，或

border: dotted 2px "#FE424D";

虚线。

Answer 3

例子：

.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>