通过CSS在表格中嵌入一些单元格

Question

在一个非常基本的表格中，我想围绕某些特定的单元格绘制边框。 我为实例创建该表：

<?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>';  
?> 

我想提出一个边框含“巴特”和“雪莉”的细胞：两个单元约1单边框。因此，对于包含“巴特”的单元格，我希望有左边框，上边框和左边框。对于包含“雪莉”的单元格，我希望有右边界，左边界和下边界。

我想我需要在我的style1tt.css文件中指定这个，然后在我的表格元素中进行正确的引用？

我是一个绝对的CSS初学者，我经历了一些基本的CSS课程/介绍，但无法找到一个（可以理解的）解决方案来解决我的问题。

任何帮助/输入将不胜感激。 谢谢，蒂姆

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; 
 
}