PHP Table 申请 CSS

PHP Table Apply CSS

我有PHPtable如下:

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 应用于 table 的最佳方法是什么?比如不同的颜色等等,不仅仅是定位。我试过给 table 一个 ID 或名称或 class 但没有任何效果。我可以给父 DIV CSS 但它给 DIV 作为一个整体 CSS,而不是单独的 rows/columns 等。例如什么是将 CSS 应用于那些 PHP columns/rows?

的最佳方法

这可能取决于您对 CSS 和通过分配 ID 和 class 使用样式表的了解,或者您是否使用了内联样式。

更容易专门为元素指定样式,例如在 CSS 中设置 table tbody tr 的样式,然后添加具有覆盖样式的 class 或内联覆盖样式。

你的问题实际上并没有多大帮助,但我希望这个 fiddle 能帮助你掌握你需要做什么:

https://jsfiddle.net/4y21mvhe/

如下图,可以使用nth-of-type选择器:

/* 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>

阅读节点:

How have a zebra style CSS for HTML table?

试试这个。

<td style="background-color:red".....> OR
<th style="background-color:red"..... >