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

时间:2019-05-02 18:03:38

标签: html css border

  

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

我尝试过申请afterSubmittable {}

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";
  }

  

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

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

我相信您需要将soliddotted添加到border属性以使其出现。对于您的情况,您需要:

border: solid 2px "#FE424D";

表示实线边框,或

border: dotted 2px "#FE424D";

点缀一个。

答案 2 :(得分:0)

示例:

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