Как разместить маленькое квадратное поле на каждом элементе td, имеющем текст в css?

Question

Я работаю над таблицей в формате html, в которой я хочу разместить квадратное поле для каждого элемента td в css

<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 code отображает элемент table / td следующим образом:

Постановка задачи:

Мне интересно, какие изменения я должен внести в приведенный выше встроенный код CSS, чтобы я мог сделать маленькое квадратное поле (как показано ниже) для каждого элемента td, имеющего текст в CSS.В этот момент, как показано выше на изображении, он создает большую квадратную рамку

Answer 1

Вашему табличному тегу требуется пробел.

<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 2

Вы можете использовать другой элемент, например span, чтобы обернуть текст внутри каждого td.Затем вы можете стилизовать этот элемент с border.Например:

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

Проверьте эту скрипку . Таблица 1 показывает обе границы td и span, а Таблица 2 показывает только границу span.

Answer 3

Как насчет использования CSS псевдоэлемента ?

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>

Answer 4

Вы можете использовать атрибуты cellpadding и tablespace.Пожалуйста, попробуйте это ..

  <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 5

Установить идентификатор для таблицы и установить CSS:

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