我正在将外部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>
试图在桌子周围和桌子之间进行虚线/固体边框。
您必须像对方已经说过的那样添加边框的样式,但是该顺序为 {size} {style} {color}
。
您的代码不起作用的两个主要原因是:您忘记了关闭第一个table
规则和border
规则的论点的顺序。
eg: 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
我相信您需要在边框属性中添加solid
或dotted
才能使其出现。在您的情况下,您需要:
border: solid 2px "#FE424D";
对于固体边框或
border: dotted 2px "#FE424D";
对于一个点缀的一个。
示例:
.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>