通过CSS边框化表格中的某些单元格

debugcn 发表于 Dev

S队

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

<?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”的单元格周围放置一个边框：两个单元格周围都包含一个单个边框。因此，对于包含“巴特”的单元格，我想设置为左边界，上边界和左边界。对于包含“ Shirley”的单元格，我想使用右边界，左边界和下边界。

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

我绝对是CSS的初学者，我学习了一些基本的CSS课程/简介，但是找不到解决我问题的（可理解的）解决方案。

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

TeeDeJee

首先，向您要处理的单元格添加一些类。

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 */
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。