如何在每个表格框周围添加边框?

3

我在给表格的每个单元格加边框时遇到了麻烦,它只显示出不带边框的表格。

我想让它显示带有边框的表格

我尝试使用 w3schools 中的 css 样式来为表格添加边框,但好像并没有起作用,我还尝试了在样式中加入 !important 标记,但依然无效...

html

    <!DOCTYPE html>
    <?php
        $database = "seriousdiseases";
        $database = new mysqli('localhost', 'root', '', $database) or die ("Unable to connect to the         
    DB");
    ?>
    <html>
        <head>
            <title>Ribose-5-phosphate isomerase deficiency</title>
            <link rel="stylesheet" type="text/css" href="style.css"/>
        </head>
        <body>
            <div id="container2">
                <div id="header">
                    <h1>Ribose-5-phosphate isomerase deficiency</h1>
                </div>
                <div id="content">
                    <div id="nav">
                        <h3>Navigation</h3>
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="aboutUs.html">About Me</a></li>
                            <li><a href="video.html">Video</a></li>
                            <li><a href="seriousDiseases.html">Serious Diseases</a></li>
                            <li><a href="updateDiseases.php">Update Diseases</a></li>
                            <img src="F1large.jpg" alt="Navigation Picture." style="height:500px;">
                        </ul>
                    </div>
                    <div id="main">
                        <table>
                            <tr>
                                <th>Id</th>
                                <th>Disease</th>
                                <th>Symptoms</th>
                            </tr>
                            <?php
                                $result = mysqli_query($database, "select * from feature") or die 
    ("Unable to connect to the DB");
                                while ($row = mysqli_fetch_array($result)){
                                    print("<tr><td>" . $row[0] . "</td><td>" . $row[1] . "</td><td>" 
    . $row[2] . "</td></tr>");
                                }
                                $database->close();
                            ?>
                        </table>
                    </div>
                </div>
            </div>
            <div id="footer">
                Copyright &copy; 2020 CLINIC SCOPE
            </div>
        </body>
    </html>

CSS

    html, body {
      height: 100%;
    }
    
    body {
        background-color: #EEE;
        font-family: Helvetica, Arial, sans-serif;
        background-image: url (logo.png);
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        display: flex;
        flex-direction: column;
    }

    table, th, td{
        border: 1px solid black !important;
    }
    
    h1, h2, h3 {
        margin: 0;
    }
    
    a {
        text-decoration: none;
        color: blue;
    }
    
    #container {
        background-color: white;
        margin-left: 0px;
        margin-right: 0px;
        position: relative;
        min-height: 97.7vh;
    }   

    #container2 {
        background-color: white;
        margin-left: 0px;
        margin-right: 0px;
        position: relative;
    }   
    
    #header {
        background-color: blue;
        color: white;
        text-align: center;
        padding: 10px;
    }
    
    #content {
        padding:10px;
        margin-right:0px;
    }
    
    #nav ul {
        list-style-type: none;
    }
    
    #nav .selected {
        font-family: bold;
    }
    
    #nav {
        width: 18%;
        float: left;
    }
    
    #main {
        width: 60%;
        float: right;
    }
    
    #footer {
      color: white;
      background-color: black;
      width: 100%;
      text-align: center;
      position: relative;
      bottom: 0;
    }        

什么是jsfiddle,jqueryHtmlCSS? - Justin Zhao
jsfiddle.net是一个不错的地方,在这里提问之前可以先进行代码测试。它类似于可运行的栈片段。在这里阅读有关如何以其他方式运行代码的所有信息:https://meta.stackoverflow.com/questions/302280/stack-snippets-vs-pastebin-jsfiddle-and-jsbin。 - react_or_angluar
1个回答

0

尝试在表标签中添加此属性 <table border = "4">


表格边框属性已经使用CSS添加。table, th, td{ border: 1px solid black !important; } 我认为问题在于CSS未应用于此HTML,可能是CSS文件未链接。 - Hitesh Tripathi
请查看此处的可运行堆栈片段以获取更多信息:https://dev59.com/05vga4cB1Zd3GeqP4p0O - react_or_angluar

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接