html - 如何在生成的 HTML 表(带有 mysql 数据)中应用 CSS？

Question

让我从我正在使用 tablesorter(很棒 http://tablesorter.com/docs/)这一事实开始

现在，我有了这段 HTML 和 PHP 代码:

<table id="tablesorter-demo" class="tablesorter">
  <thead>
    <tr>
      <th>Max.View</th>
      <th>Portefeille</th>
      <th>Groep</th>
      <th>Aantal</th>
      <th>Aanschafkoers</th>
      <th>Aanschaf Euro</th>
      <th>Aandeel</th>
      <th>Vandaag</th>
    </tr>
  </thead>
  <tbody>

<?php 
  $conn = mysql_connect('localhost','altered','altered');
  mysql_select_db("altered",$conn);

  $query1 = "select * from data";
  $get = mysql_query($query1);
  while($row = mysql_fetch_array($get)) {
?>
    <tr> <!-- WARNING: this was missing in the original -->
      <td><?php echo "<img heigth=90 width=260 border=1 vspace=2 hspace=2 align=middle src=".$row['bigview']."?=rand(1,999)/>" ?></td>
      <td><?php echo $row['fname'] ?></td>
      <td><?php echo $row['mi'] ?></td>
      <td><?php echo $row['age'] ?></td>
      <td><?php echo $row['gender'] ?></td>
      <td><?php echo $row['age'] * $row['gender'] ?></td>
      <td align="right"><?php print "<a href='$row[URL]'> $row[lname] </a>";       ?></td>
      <td ><?php echo "<img heigth=90 width=260 border=1 vspace=2 hspace=2 src=".$row['address']."?=".rand(1,999)."/>" ?></td>
    </tr>
<?php }?>


  </tbody>
</table>

现在我想在上面应用这个 CSS...

http://dapinder.com/zoom-images-on-mouse-hover-using-css3/

(there are lots of other examples: http://stanhub.com/how-to-create-zoom-effect-on-image-hover-with-css-and-jquery/) But they question remains for all the same. (How do I apply it on a generated table with mysql data?)

更准确地说，我希望它用在最后一列....

问题 1:我是否必须在 thead th vandaag 的上部某处应用 class=zoom_img？

或

我必须把它应用到最后一部分吗？

<td><?php echo "<img

我试过了。例如这个:

<td ><?php echo "<img class=zoom_img hei

但是没有任何反应......

问题 2:我真的需要像示例中那样使用 DIV 吗？如果是，我应该在哪里使用它？

另外，这个例子用双引号显示......:

<div class="zoom_img">
  <img src="image.png" title="Magify image on mouse hover using CSS" />
</div>

....但是在这一行中应该如何格式化:

<td ><?php echo "<img class=zoom_img heigth=90 width=260 border=1 vspace=2 hspace=2 src=".$row['address']."?=".rand(1,999)."/>" ?></td>

我可以像 heigth=90 那样不使用双引号吗？
或者
它是否需要双引号，因为它是 CSS(或其他)？

Answer 1

您可以在 PHP 中转义双引号:

<?php echo "<img class=\"zoom\"_img heigth=\"90\" width=\"260\" border=\"1\" vspace=\"2\" hspace=\"2\" class=\"yourclass\" src=".$row['address']."?=".rand(1,999)."/>" ?>

但最好将 CSS 外包到 .css 文件中，只需添加 class="yourclass"

您可以尝试在您的环境中查看您的输出示例，仅使用 html/css，这样您可以看到您要应用的 CSS3 有效，然后转义它并使用 PHP 执行您需要的任何操作。而且您已经知道如何转义 "