PHP Table Apply CSS


PHP Table Apply CSS

我有如下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?