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 能帮助你掌握你需要做什么:
如下图,可以使用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"..... >
我有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 能帮助你掌握你需要做什么:
如下图,可以使用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"..... >