Question

我正在将外部CSS应用于HTML项目以在其中包含边框格式化表格。一切都适用于我的桌子，除了无论如何边界。

我尝试过申请afterSubmit和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";
  }

尝试在桌子周围和桌子之间绘制虚线/实心边框。

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

我相信您需要将solid或dotted添加到border属性以使其出现。对于您的情况，您需要：

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>

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

3 个答案: