个人中心
gpt4 book ai didi

javascript - 表格边框在可扩展列表内容中不可见

转载 作者：太空宇宙 更新时间：2023-11-04 10:55:54 25 4
gpt4 key购买 nike

我刚开始学习 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>

最佳答案

这是一个可折叠列表的示例:

http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_lists_collapsible

您可以使用 jQuery 等 javascript 来快速完成它。

你的 table 看起来不错。

编辑:

问题出在你的造型上。我稍微修改了您的方法，因此表格的样式使用名为“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;，你可以根据需要更改值。

关于javascript - 表格边框在可扩展列表内容中不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34620289/

25 4 0
文章推荐： 居中 div 内的 HTML 表格无法正确显示
文章推荐： c++ - c linux 和 windows 中的键盘扫描代码
文章推荐： python - 尝试使用 pip3 安装 virtualenvwrapper
文章推荐： html - 如何在 md-content 中禁用滚动或在移动设备上设置最小高度
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com