What is the best way to position a small square box over each td element containing text using css?

Question

What is the best way to position a small square box over each td element containing text using css?

Currently, I am in the process of developing an HTML table where I would like to incorporate a square box around each td element using 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>

The aforementioned HTML/PHP code showcases the table/td elements displayed as follows:

https://i.sstatic.net/DgKBM.png

Issue at Hand:

I am seeking ways to modify the inline CSS code above in order to create a small square box (as illustrated below) around each td element containing text with CSS. Currently, as depicted in the image provided above, it is generating a larger square box than desired

https://i.sstatic.net/4Y5cv.png

html css html-table

Answer 1

Answer №1

To add a border to the text inside each td, consider wrapping the text in a span element and styling it with a border. Here's an example:

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

You can view a demo of this technique on this fiddle. In Table 1, you'll see both the borders of td and span, while Table 2 only displays the border of span.

Answer 2

To add a border to the text inside each td, consider wrapping the text in a span element and styling it with a border. Here's an example:

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

You can view a demo of this technique on this fiddle. In Table 1, you'll see both the borders of td and span, while Table 2 only displays the border of span.

Answer 3

Answer №2

Make sure to add a cellspacing attribute to your table tag for proper spacing between cells.

<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

Make sure to add a cellspacing attribute to your table tag for proper spacing between cells.

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

Answer №3

Assign an id to a table and apply some CSS styling:

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

Answer 6

Assign an id to a table and apply some CSS styling:

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

Answer 7

Answer №4

To adjust the spacing in your table, you can make use of the cellpadding and cellspacing attributes. Here's how you can implement it:

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

To adjust the spacing in your table, you can make use of the cellpadding and cellspacing attributes. Here's how you can implement it:

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

Answer №5

Have you considered incorporating a CSS pseudo element for this task?

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 10

Have you considered incorporating a CSS pseudo element for this task?

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>

What is the best way to position a small square box over each td element containing text using css?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the method for displaying the word '<head>' within a <p> element in HTML code?

Is there a way I can link a variable to a URL for an image?

The menu bar becomes distorted when the page is zoomed out

Changing the color of a pseudo element in Material-UI

What happens when browsers encounter unfamiliar at-rules?

Styling elements with CSS

When working with TextareaAutosize component in MUI, an issue surfaces where you need to click on the textarea again after entering each character

Utilizing HTML and JavaScript to add grayscale effect to images within a table, with the ability to revert to the colored version upon mouseover

The div element is not extending all the way to the left side of the browser window

What is the best way to incorporate one Div within another Div using JavaScript?

Shine a light on the input with a captivating outer

The calculator is experiencing issues with JavaScript functionality

Using TypeScript, apply an event to every element within an array of elements through iteration

Create a triangular shape to fit on the right side of a 'li' element

Utilize the data storage API within Next.js or directly in the user's

Mobile device causing HTML margins to shrink

Not compatible with certain browsers, scrollable wrapper in fullscreen

Footer void of color

Exploring the World of GiantBomb APIs

Ways to stylize bullet points in lists with CSS in HTML document