html - 如何在 css 中的每个带有文本的 td 元素上放置一个小方框？

Question

我正在用 html 制作一个表格，我想在 css 中的每个 td 元素上放置一个方框

<tr>
    <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"><?php echo $program["series_title"]; ?></td>
    <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"><?php echo $program["episode_title"]; ?></td>    
    <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"><?php echo $program["description"]; ?></td>
    <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"><?php echo $program["series_title_fr"]; ?></td>
    <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"><?php echo $program["episode_title_fr"]; ?></td>    
    <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"><?php echo $program["description_fr"]; ?></td>
    <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"> <?php echo basename($file, ".mp4"); ?></td>
</tr>

上面的html/php 代码 以下列方式显示table/td 元素:

问题陈述:

我想知道我应该在上面的内联 css 代码中进行哪些更改，以便我能够在每个包含 css 文本的 td 元素上制作一个小方框(如下所示)。此时，如上图所示 制作一个大方盒

Answer 1

您可以使用另一个元素(例如 span)来包装每个 td 中的文本。然后您可以使用 border 为该元素设置样式。例如:

<td><span style="border: 1px solid black; padding: 5px;">Test</span></td>

检查 this fiddle . 表1同时显示了td和span的边框，而表2只显示了的边框跨度。