我刚开始学习HTML并复制代码以创建可扩展的可折叠列表。在列表内容中，我创建了一个表，但是当我打开网页时，该表的边框不可见。当我在没有列表的网页上运行时，同一个表格显示边框很好。请帮我解决问题。代码如下所示：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet"/>
</head>
<body>
<div>
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i><h5> <a>Leader </a></h5></div>
<div class="collapsible-body">
Sample Line
Course Description
<p>The best brains compete to get an admission to this two-year legendary course offered by us. The course, unmatched in its rigour and precision, raises you to the very zenith of your preparation. The stimulating atmosphere of the institute, small batches (yes-we believe in quality) and one to one interaction with the instructor ensure that every rough edge is smoothened, every small doubt is cleared. More importantly, we train you to think analytically, we give you a systematic approach to problem solving . If you think you are bright, if you think you are capable, if you think that you can make it to the top, this course is precisely for you.
</p>
<table
style="text-align: left; width: 718px; height: 139px; margin-left: auto; margin-right: auto;"
border=10 BORDERCOLOR=RED cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td
style="vertical-align: top; text-align: center; background-color: rgb(204, 204, 204); font-weight: bold;">Mode
of Admission<br>
</td>
<td colspan="2" rowspan="1"
style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">Through
BOOST <br>
</td>
</tr>
<tr>
<td
style="vertical-align: top; text-align: center; background-color: rgb(204, 204, 204); font-weight: bold;">Phases<br>
</td>
<td
style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">Phase
1<br>
</td>
<td
style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">Phase
2<br>
</td>
</tr>
<tr>
<td
style="vertical-align: top; text-align: center; background-color: rgb(204, 204, 204); font-weight: bold;">Commencement
Date<br>
</td>
<td
style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">7
April 2016<br>
</td>
<td
style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">28
April 2016<br>
</td>
</tr>
<tr>
<td
style="vertical-align: top; text-align: center; background-color: rgb(204, 204, 204); font-weight: bold;">Last
of Registration<br>
</td>
<td
style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">5
April 2016<br>
</td>
<td
style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">26
April 2016<br>
</td>
</tr>
<tr>
<td
style="vertical-align: top; text-align: center; background-color: rgb(204, 204, 204); font-weight: bold;">Last
Date of Refund<br>
</td>
<td
style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">20
April 2016<br>
</td>
<td
style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">10
May 2016<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
</div>
</li>
</ul>
</div>
</body>
</html>
答案 0 :(得分：1)
以下是可折叠列表的示例：
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_lists_collapsible
你可以使用像jQuery这样的javascript来快速完成它。
你的桌子看起来很好。
修改
问题在于你的造型。我已经修改了你的方法，所以这个表的样式是一个名为“table-style”的css类。表格单元格也使用“table-cell-1”和“table-cell-2”类来设置样式。现在，您可以更好地了解CSS中的样式。复制粘贴并测试样品。如果这是你需要的话，请竖起大拇指。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet"/>
<style>
.table-style {
text-align: left;
width: 718px;
height: 139px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 10px;
border-color: red;
cellpadding: 2;
cellspacing: 2;
}
.table-cell-1 {
vertical-align: top;
text-align: center;
background-color: rgb(204, 204, 204);
font-weight: bold;
border-style: solid;
border-color: red;
}
.table-cell-2 {
vertical-align: top;
text-align: center;
background-color: rgb(255, 255, 51);
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<div>
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i><h5> <a>Leader </a></h5></div>
<div class="collapsible-body">
Sample Line
Course Description
<p>The best brains compete to get an admission to this two-year legendary course offered by us. The course, unmatched in its rigour and precision, raises you to the very zenith of your preparation. The stimulating atmosphere of the institute, small batches (yes-we believe in quality) and one to one interaction with the instructor ensure that every rough edge is smoothened, every small doubt is cleared. More importantly, we train you to think analytically, we give you a systematic approach to problem solving . If you think you are bright, if you think you are capable, if you think that you can make it to the top, this course is precisely for you.
</p>
<table class="table-style">
<tbody>
<tr>
<td class="table-cell-1">Mode of Admission<br>
</td>
<td colspan="2" rowspan="1" class="table-cell-2">Through BOOST <br>
</td>
</tr>
<tr>
<td class="table-cell-1">Phases<br>
</td>
<td class="table-cell-2">Phase1<br>
</td>
<td class="table-cell-2">Phase2<br>
</td>
</tr>
<tr>
<td class="table-cell-1">Commencement Date<br>
</td>
<td class="table-cell-2">7 April 2016<br>
</td>
<td class="table-cell-2">28 April 2016<br>
</td>
</tr>
<tr>
<td class="table-cell-1">Last of Registration<br>
</td>
<td class="table-cell-2">5 April 2016<br>
</td>
<td class="table-cell-2">26 April 2016<br>
</td>
</tr>
<tr>
<td class="table-cell-1">Last Date of Refund<br>
</td>
<td class="table-cell-2">20 April 2016<br>
</td>
<td class="table-cell-2">10 May 2016<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
</div>
</li>
</ul>
</div>
</body>
</html>
如果您想在单元格中使用较粗的边框，可以在其他css类中使用：border-width: 10px;，您可以根据需要更改值。