PHP表应用CSS [关闭]答案

【问题标题】：PHP Table Apply CSS [closed]PHP表应用CSS [关闭]
【发布时间】：2015-06-04 05:49:36
【问题描述】：

我的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 列/行的最佳方法是什么？

【问题讨论】：

“没什么用”不是很有帮助。由于您的问题是客户端问题，因此包含您的 PHP 源代码是没有用的。请更新您的问题以包含您的页面生成的 HTML 示例，包括您尝试应用的 CSS。如果您为 tr 或 td 创建规则，它将应用于适当的元素。

标签： php jquery html css html-table

【解决方案1】：

这取决于您对 CSS 的了解以及通过分配 ID 和类来使用样式表，或者您是否使用内联样式。

将样式专门分配给元素更容易，例如在 CSS 中设置 table tbody tr 的样式，然后添加具有覆盖样式或内联覆盖样式的类。

你的问题实际上并没有那么有帮助，但我希望这个小提琴能帮助你掌握你需要做什么：

https://jsfiddle.net/4y21mvhe/

【讨论】：

【解决方案2】：

试试这个。

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

【讨论】：

【解决方案3】：

如下图，可以使用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?

【讨论】：