html - 如何在每个表格框周围放置边框?

标签 html css

我在表格中的每个框周围放置表格边框时遇到问题,它只是显示没有边框的表格。

我希望它显示带边框的表格

我已经尝试在 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;
    }        

最佳答案

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

关于html - 如何在每个表格框周围放置边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65367331/

相关文章:

html - 悬停时更改单个 li 的颜色

javascript - 如何将地理位置输出导出到日志文件?

html - 使用 CSS 将图像与文本垂直对齐

jquery - 音频标签、jQuery 和 currentTime 的问题

html - IE11 中 div 之间的 1px 间距

html - 如何在仅使用 css 打印时为每一页留出一些空间

css - 我怎样才能修复我的对齐方式?

javascript - Css 行用 bootstrap 分割

css - 用 CSS 创意制作 SVG 动画?

css - 如何使 jQuery UI 导航菜单水平?