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

您可以使用cellpadding和cellspacing表属性。请尝试这个。

  <table border="1" cellpadding="5" cellspacing="10">
  <tr>
    <td>
      <?php echo $program["series_title"]; ?>
    </td>
    <td>
      <?php echo $program["episode_title"]; ?>
    </td>
    <td>
      <?php echo $program["description"]; ?>
    </td>
    <td>
      <?php echo $program["series_title_fr"]; ?>
    </td>
    <td>
      <?php echo $program["episode_title_fr"]; ?>
    </td>
    <td>
      <?php echo $program["description_fr"]; ?>
    </td>
  </tr>
</table>

Answer 2

您可以使用另一个元素，例如span来包装每个td内部的文本。然后，您可以使用border对该元素进行样式设置。例如：

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

选中this fiddle。表1 显示了td和span的边界，而表2 仅显示了span的边界。

Answer 3

您的表格标签需要一个单元格间距。

<table cellspacing="10px">
  <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>
</table>

Answer 4

设置表的ID并设置CSS：

#table-id td {
    border: 1px solid black;
}

Answer 5

如何使用CSS pseudo element？

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

tr {
  position: relative;
}

tr td {
  min-width: 30%;
  display: inline-block;
  text-align: center;
  border: 1px solid black;
}

tr:after {
  height: 20px;
  width: 40px;
  content: 'Box';
  position: absolute;
  border: 1px solid red;
  right: 0;
}

<table>
  <tr>
    <td>Column</td>
    <td>Column</td>
    <td>Column</td>
  </tr>
  <tr>
    <td>Column</td>
    <td>Column</td>
    <td>Column</td>
  </tr>
  <tr>
    <td>Column</td>
    <td>Column</td>
    <td>Column</td>
  </tr>
</table>

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

5 个答案: