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>