我有如下PHP表:
echo "<table border='2'>";
echo "<tr>";
echo"<th>Username</th>";
echo"<th>Forename</th>";
echo"<th>Surname</th>";
echo"<th>Course</th>";
echo"<th>Subject</th>";
echo"<th>Level</th>";
echo"<th>Date</th>";
echo"<th>Time</th>";
echo"</tr>";
$count = 0;
while ($count < $numrow)
{
$row = $re->fetch_assoc();
extract($row);
echo "<tr>";
echo "<td>";
echo $username;
echo "</td>";
echo "<td>";
echo $firstName;
echo "</td>";
echo "<td>";
echo $surname;
echo "</td>";
echo "<td>";
echo $course;
echo "</td>";
echo "<td>";
echo $subject;
echo "</td>";
echo "<td>";
echo $level;
echo "</td>";
echo "<td>";
echo $date;
echo "</td>";
echo "<td>";
echo $time;
echo "</td>";
echo "</tr>";
$count = $count + 1;
将CSS应用于表的最佳方式是什么?比如不同的颜色等等不仅仅是定位。我试着给表一个ID、名称或类,但都不起作用。我可以给父DIV提供CSS,但它给DIV作为一个整体的CSS,而不是单独的行/列等。那么,例如,将CSS应用于那些PHP列/行的最佳方式是什么?
这取决于您对CSS的了解,以及通过分配ID和类来使用样式表,或者您是否进行了内联样式。
将样式专门分配给元素更容易,例如在CSS中设置table tbody tr
的样式,然后添加具有重写样式的类,或内联重写样式。
你的问题实际上没有那么大帮助,但我希望这把小提琴能帮助你掌握你需要做什么:
https://jsfiddle.net/4y21mvhe/
试试这个。
<td style="background-color:red".....> OR
<th style="background-color:red"..... >
如下所示,您可以使用类型选择器的第n个:
/* Changes the background color of every odd row to light gray */
table tr:nth-of-type(odd) {
background-color: #ccc;
}
/* Changes the weight of each td cell within each odd row to bold */
table tr:nth-of-type(odd) td {
font-weight: bold;
}
/* Collapses table borders to make the table appear continuous */
table {
border-collapse: collapse;
}
/* Spaces out each table cell */
table td {
padding: 1em;
}
/* Changes the background color of every odd row to light gray */
table tr:nth-of-type(odd) {
background-color: #ccc;
}
/* Changes the weight of each td cell within each odd row to bold */
table tr:nth-of-type(odd) td {
font-weight: bold;
}
/* Collapses table borders to make the table appear continuous */
table {
border-collapse: collapse;
}
/* Spaces out each table cell */
table td {
padding: 1em;
}
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
读取远程:
如何为HTML表提供斑马样式的CSS?