通过 CSS 为 table 中的一些单元格添加边框

Question

在一个非常基本的 table 中，我想在一些特定的单元格周围放置一个边框。例如，我创建了这个 table:

<?php
echo '<link rel="stylesheet" type="text/css" href="style1tt.css">';

echo '<table>';
echo '<tr>
    <th>name</th>
    <th>score</th>
    <th>position</th></tr>';
echo '<tr>
    <td>Bart</td>
    <td>189</td>
    <td>2</td></tr>';           

echo '<tr>
    <td>Shirley</td>
    <td>211</td>
    <td>1</td></tr>';

echo '<tr>
    <td>Paul</td>
    <td>109</td>
    <td>3</td></tr>';
echo '</table>';    
?>

我想在包含 "Bart" 和 "Shirley" 的单元格周围放置一个边框：两个单元格周围有 1 个单边框。所以对于包含 "Bart" 的单元格，我想要左边框、上边框和左边框。对于包含 "Shirley" 的单元格，我想要右边框、左边框和下边框。

我想我需要在我的 style1tt.css 文件中指定它，然后在我的 table 元素中做出正确的引用？

我是 CSS 的绝对初学者，我了解了一些基本的 CSS courses/introductions 但找不到解决我问题的（可以理解的）方法。

任何 help/input 将不胜感激。谢谢，蒂姆

Answer 1

首先在您要添加地址的单元格中添加一些类。

echo '<tr>
    <td class="border-tophalf">Bart</td>
    <td>189</td>
    <td>2</td></tr>';           

echo '<tr>
    <td class="border-bottomhalf">Shirley</td>
    <td>211</td>
    <td>1</td></tr>';

现在您可以将 css 添加到特定的类:

.border-tophalf{
  border: 1px solid #000; /* adds full border */
  border-bottom: none; /* removes bottom border */
}
.border-bottomhalf{
  border: 1px solid #000; /* adds full border */
  border-top: none; /* removes top border */
}

Answer 2

//add class in td
.top{
  border-bottom: 1px solid #000;
}
.bottom{
  border-top: 1px solid #000;
}

通过 CSS 为 table 中的一些单元格添加边框

Border some cells in table via CSS

css

layout

border

cells