需要通過CSS把顏色到HTML表格

<?php 
    $con=mysqli_connect("localhost","root","","db"); 
    // Check connection 
    if (mysqli_connect_errno()) 
     { 
      echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
     } 
     $co_name = mysqli_real_escape_string($con, $_POST['co_name']); 
     $co_address = mysqli_real_escape_string($con, $_POST['co_address']); 
     $co_website = mysqli_real_escape_string($con, $_POST['co_website']); 
     $co_phoneno = mysqli_real_escape_string($con, $_POST['co_phoneno']); 
     $co_contactperson = mysqli_real_escape_string($con, $_POST['co_contactperson']); 
     $therapist_id = mysqli_real_escape_string($con, $_POST['therapist_id']); 

     $result = mysqli_query($con,"SELECT * FROM therapist_office WHERE therapist_id='".$user_id."'"); 
     echo"<table id='miyazaki' style='border-collapse: collapse; border: 1px solid; margin-left:180px; width:1000px; margin-top:30px;'>"; 
      echo"<thead style='border:1px solid; background-color:#ffe3ab;' >"; 
       echo"<tr>"; 
        echo"<th style='border: 1px solid; padding: .65em;' >Office Name</th>"; 
        echo"<th style='border: 1px solid; padding: .65em;' >Address</th>"; 
        echo"<th style='border: 1px solid; padding: .65em;' >Website</th>"; 
        echo"<th style='border: 1px solid; padding: .65em;' >PhoneNo</th>"; 
        echo"<th style='border: 1px solid; padding: .65em;'>Contact Person</th>"; 
       echo"</tr>"; 
      echo"</thead>"; 

      while($row = mysqli_fetch_array($result)) 
       { 
        echo"<tbody>"; 
         echo"<tr>"; 
          echo "<td style=' padding: .65em;'>" . $row['co_name'] . "</td>"; 
          echo "<td style=' padding: .65em;'>" . $row['co_address'] . "</td>"; 
          echo "<td style=' padding: .65em;'>" . $row['co_website'] . "</td>"; 
          echo "<td style=' padding: .65em;'>" . $row['co_phoneno'] . "</td>"; 
          echo "<td style=' padding: .65em;'>" . $row['co_contactperson'] . "</td>"; 
         echo"</tr>"; 
        echo"</tbody>"; 
       } 
     echo"</table>"; 
    mysqli_close($con); 
?>

我有這個表很簡單，但我不能夠通過CSS給它添加顏色，目前我已經使用內聯CSS稍後將其轉換爲外部CSS 。我希望用不同的顏色顯示錶格的頭部，並且包含數據的表格的行應該是2種顏色交替運行。將不勝感激，如果有人可以幫助我需要通過CSS把顏色到HTML表格

PS有些人希望看到我的另一片，這裏是

<style> 
     table { border-collapse: collapse; font-family: Futura, Arial, sans-serif; border: 1px solid ; margin-left:180px; width:1000px; margin-top:30px;} 
     caption { font-size: larger; margin: 1em auto; } 
     th, td { padding: .65em; } 
     th, thead { background-color: ffecc4; border: 1px solid ; } 
     tr:nth-child(odd) { background: #ccc; } 
     tr:hover { background: #aaa; } 
     td { border-right: 1px solid #777; }   
    </style>

來源

2014-12-03 user3732711

告訴我們您的嘗試。當前'style'標籤不包含任何顏色信息。 – dognose 2014-12-03 06:02:49

make a jsfiddle – morne 2014-12-03 06:04:01

哪裏是你的代碼中的CSS部分？（除了內聯的） – user3806613 2014-12-03 06:17:25

HTML表格，你不能給背景色或顏色<thead>。 <thead>不會採取任何顏色。你可以做..

#miyazaki thead th{ 
background-color:red; 
color:#000;}

而對於替代顏色就可以申請

#miyazaki tr:nth-child(odd){ 
    background: #b8d1f3; 
} 

#miyazaki tr:nth-child(even){ 
    background: #dae5f4; 
}

來源

2014-12-03 06:30:32

你可以用CSS做：

#miyazaki tr:nth-child(even) {background: #CCC} 
#miyazaki tr:nth-child(odd) {background: #FFF}

Reference

注意：IE 8不支持這個。

或者，如果您有jQuery的：

<script> 
$(document).ready(function() { 
    $("#miyazaki tr:even").css("background-color", "#CCC"); 
    $("#miyazaki tr:odd").css("background-color", "#FFF"); 
}); 
</script>

來源

2014-12-03 06:04:17 Pupil

如果添加類，你的代碼如

`echo"<th style='border: 1px solid; padding: .65em;' class='tblHead'>Office Name</th>";`

和

`echo "<td style=' padding: .65em;'>" . $row['co_name'] . " class='tblRow' </td>";`

然後，你可以寫一些CSS設置樣式對於那些類。

喜歡：

.tblHead { 
    background-color: yellow; 
} 

.tblRow{ 
    background-color: green; 
}

來源

2014-12-03 06:22:50 morne

用jQuery做它：

<script> 
$(document).ready(function() { 
    $("#miyazaki tr:even").css("background-color", "#CCC"); 
    $("#miyazaki tr:odd").css("background-color", "#FFF"); 
}); 
</script>

來源

2015-02-27 07:59:08

需要通過CSS把顏色到HTML表格

回答

相關問題