Question

我正在尝试仅在顶行周围创建边框！目前，边框仅显示在表格的外部。但我也希望在第一排附近有一个边框。有人可以帮我这么做吗？我希望“Team，Correct Picks和Points”这一行在它周围有一个边框。

<body>
    <?=$leaguename?>
    <center><table cellspacing="0" style="width:400px; border:1px solid gray">
    <?
    echo "<tr border=\"1\"><td> Team </td><td>Correct Picks</td><td>Points</td></tr>";
    while($row = mysql_fetch_array($memberslist)) {
        if ($row['User_ID'] == $id) {
            echo "<tr style=\"border:1px solid gray\" bgcolor=\"gray\"><td>" . $row['User_ID'] . "</td><td><b>" . $row['Correct_Picks'] . " </b> /" . $maxcorrectpicks . "</td><td>" . $row['Points'] . "</td></tr>";
        } else {
            echo "<tr><td>" . $row['User_ID'] . "</td><td><b>" . $row['Correct_Picks'] . " </b> /" . $maxcorrectpicks . "</td><td>" . $row['Points'] . "</td></tr>";
    }
    }
    ?>
    </table></center>

</body>

Answer 1

这是表现性的，所以将它混合到PHP中是一个坏主意。相反，使用CSS：

tr:first-child td { border-top: 1px solid black; border-bottom: 1px solid black; }
tr:first-child td:first-child { border-left:1px solid black; }
tr:first-child td:last-child { border-right:1px solid black; }

IE7 + 8对* -child选择器的支持可能有点儿麻烦。如果它在这些浏览器中不起作用，请考虑使用JavaScript polyfills。

您可能还希望将标头放在<thead>和<th>元素中，以使<tr>数据成为<tbody>元素中的第一行。

e.g。

<table>
  <thead>
    <tr>
      <th>Team</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>

特定表行周围的边框

1 个答案: