PHP表格無法設定樣式

我有一個作業告訴我將 MySQL 資料庫連接到我們的 PHP 檔案并在 HTML 表中回顯它。我設法連接它，但我的問題是我無法為表格設定樣式，其他元素看起來不錯，所以我認為樣式表已正確鏈接。

這是我的 PHP ->

<div id="stats" class="stats">
    <center><h2>Statistic.</h2></center>
    

    <table>
        <tr>
            <th>Number</th>
            <th>Degree</th>
            <th>Institution</th>
            <th>Graduate</th>
        </tr>

        <?php
        $conn = mysqli_connect("localhost", "root", "", "my_edu");
        if ($conn -> connect_error) {
            die("Connection Failed:". $conn -> connect_error);
        }

        $sql = "SELECT * FROM edu";
        $result = $conn -> query($sql);

        if ($result -> num_rows > 0) {
            while ($row = $result -> fetch_assoc()) {
                echo "<tr><td>". $row["number"] ."</td><td>". $row["degree"] ."</td><td>". $row["name"] ."</td><td>". $row["graduate"] ."</td></tr>";
            }  
        }
        else {
            echo "0 result";
        }
        mysqli_close($conn);
        ?>

    </table>
    

</div>

表格已列印，如您在此處看到的

這是應該為桌子設計的那個

.stats table{
width: 800px;
border: 1px solid black;
border-collapse: collapse;   
padding: 3px;
text-align: center;
}

/*STATISTIC*/
.stats{
    width: 100%;
    height: 600px;
    background: #FFFFFF;
}

.stats h2{
    padding: 50px;
    font-weight: bold;
    font-size: 40px;
}

.stats h3{
    padding-top: 100px;
    font-weight: bold;
    font-size: 50px;
}

.stats table{
    width: 800px;
    border: 1px solid black;
    border-collapse: collapse;   
    padding: 3px;
    text-align: center;
}

<div id="stats" class="stats">
        <center><h2>Statistic.</h2></center>
        

        <table>
            <tr>
                <th>Number</th>
                <th>Degree</th>
                <th>Institution</th>
                <th>Graduate</th>
            </tr>

            <?php
            $conn = mysqli_connect("localhost", "root", "", "my_edu");
            if ($conn -> connect_error) {
                die("Connection Failed:". $conn -> connect_error);
            }

            $sql = "SELECT * FROM edu";
            $result = $conn -> query($sql);

            if ($result -> num_rows > 0) {
                while ($row = $result -> fetch_assoc()) {
                    echo "<tr><td>". $row["number"] ."</td><td>". $row["degree"] ."</td><td>". $row["name"] ."</td><td>". $row["graduate"] ."</td></tr>";
                }  
            }
            else {
                echo "0 result";
            }
            mysqli_close($conn);
            ?>

        </table>
        

    </div>

uj5u.com熱心網友回復：

您必須在 table、thead、th、td、tr 上應用 css。您正在應用作為父 div 的 css。這是一個例子

*{
  font-family:sans-serif;
}



table tr td,th:not(.th-head){
  border-right: 1px solid blue;
}

table,tfoot{
  border:1px solid #a8afcc;
  word-break: break-all;

}

table:nth-of-type(1) caption {
  font-weight: 800;
}


table {
  border-collapse: collapse;
  border-spacing:1rem 0.1rem;
  table-layout:fixed;/*auto viene por defecto*/
  width: 100%;
  empty-cells: hide;
  text-align:center
}

thead{
  color:white;
  background:rgb(25, 27, 151) ;
}
thead th{
  /* border: none; */
}

table tbody tr:not(tfoot):nth-child(odd) {
    background: #e1e6f8;
}
table tbody tr:nth-child(even) {
    background: #c3cdff;
}

tr:not(.tr-head):hover{
  background:rgb(130, 130, 130);
}
td:hover{
  background:rgb(126, 126, 126);

}

td{
text-align: right;
}

th{
  text-align:center;
}

 <table >
      
       <thead>
           <tr class="tr-head">
               <th class="th-head">Col 1</th>
               <th class="th-head">Col 2</th>
               <th class="th-head">Col 3</th>              
           </tr>
       </thead>
       <tbody>
           <tr>
             
               <td>300</td>
               <td>2</td>
               <td>600</td>
            
           </tr>
           <tr>

               <td>1000</td>
               <td>40</td>
               <td>4000</td>
              
           </tr>
         
        </tbody>
       
   </table>

uj5u.com熱心網友回復：

<div id="stats" class="stats">
<h2>Statistic.</h2>

<table>
    <tr>
        <th>Number</th>
        <th>Degree</th>
        <th>Institution</th>
        <th>Graduate</th>
    </tr>

    <?php
    $conn = mysqli_connect("localhost", "root", "", "my_edu");
    if ($conn -> connect_error) {
        die("Connection Failed:". $conn -> connect_error);
    }

    $sql = "SELECT * FROM edu";
    $result = $conn -> query($sql);

    if ($result -> num_rows) {
        while ($row = $result -> fetch_assoc()) {
?>
<tr>
        <td><?= $row["number"] ?></td>
        <td><?= $row["degree"] ?></td>
        <td><?= $row["name"] ?></td>
        <td><?= $row["graduate"] ?></td>
    </tr>

<?php
        }  
    }
    else {
        echo "0 result";
    }
    mysqli_close($conn);
    ?>

</table>
</div>
<link rel="stylesheet" href="yourStyleCode.css">

我繼續對你的 css 做了一些調整

    /*STATISTIC*/
.stats{
  width: 100%;
  height: 600px;
  background: #FFFFFF;
}

.stats h2{
  padding: 50px;
  font-weight: bold;
  font-size: 40px;
}

.stats th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #0e76a7;
  color: white;
}
.stats table {
  width: 75%;
  margin: auto;
  border-radius: 9px;
  padding: 3px;
  text-align: center;
}

.stats td, .stats th {
  border: 1px solid #ddd;
  padding: 8px;
}

uj5u.com熱心網友回復：

使用statsid 定義您的風格。意味著如果您在范圍內設定樣式，它不會影響您網站的其他部分。但是您需要正確的選擇器才能進入范圍。.stats table tr {...}例如。在 SASS 等預編譯的 CSS 中，撰寫樣式非常容易。但這只是一個注釋。

.scope {
  tr, td { ... }
}

標籤：php html css

上一篇：更改MUI禁用輪廓輸入的邊框顏色

下一篇：html5隱藏和取消隱藏div元素