<?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 种颜色。如果有人可以帮助我,将不胜感激
P.S有些人想看看我的另一张纸,这里是
<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>
在 html TABLE 中,您不能为<thead>
提供背景色或颜色。 <thead>
不会不采用任何颜色。你可以做..
#miyazaki thead th{
background-color:red;
color:#000;}
对于替代颜色,您可以应用
#miyazaki tr:nth-child(odd){
background: #b8d1f3;
}
#miyazaki tr:nth-child(even){
background: #dae5f4;
}
使用 jquery 进行操作:
<script>
$(document).ready(function() {
$("#miyazaki tr:even").css("background-color", "#CCC");
$("#miyazaki tr:odd").css("background-color", "#FFF");
});
</script>
你可以用CSS来做到这一点:
#miyazaki tr:nth-child(even) {background: #CCC}
#miyazaki tr:nth-child(odd) {background: #FFF}
参考
注意:IE 8 不支持此功能。
或者,如果你有jQuery:
<script>
$(document).ready(function() {
$("#miyazaki tr:even").css("background-color", "#CCC");
$("#miyazaki tr:odd").css("background-color", "#FFF");
});
</script>
如果你在代码中添加类,例如
`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;
}