我正在将外部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";
}
尝试在桌子周围和桌子之间绘制虚线/实心边框。
答案 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>
答案 1 :(得分:0)
我相信您需要将solid
或dotted
添加到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>