Use CSS to insert a solid rectangle into the contents of a table cell

Question

Use CSS to insert a solid rectangle into the contents of a table cell

Struggling with the HTML code that defines a table? Here is an example:

<table>
  <th>
     <td style="width:200px">
        col1
     </td>
  </th>
  <tr>
     <td id="a1">
        text1
     </td>
  </tr>
</table>

Want to add a rectangle next to "text1" within cell #a1, using CSS only? Ensure it has a custom width (e.g. 40px) and is positioned at a fixed offset (e.g. 100px) from the left side of the cell. The final result should look like this:

text1  XXXX

(XXXX represents the filled rectangle)

Keep in mind that you cannot modify the existing HTML or use JavaScript.

The goal is for the CSS to not affect the text's appearance or positioning.

Is achieving this design possible with just CSS?

css

Answer 1

Answer №1

Enhance your design with a background:

#a1 {
  background: 
   linear-gradient(red, red) 
   left 100px top 50% 
   /
   40px 10px  /*width height (use 100% instead of 10px for full height)*/
   no-repeat;
}

<table>
  <tr>
    <th style="width:200px">
      col1
    </th>
  </tr>
  <tr>
    <td id="a1">
      text1
    </td>
  </tr>
</table>

Answer 2

Enhance your design with a background:

#a1 {
  background: 
   linear-gradient(red, red) 
   left 100px top 50% 
   /
   40px 10px  /*width height (use 100% instead of 10px for full height)*/
   no-repeat;
}

<table>
  <tr>
    <th style="width:200px">
      col1
    </th>
  </tr>
  <tr>
    <td id="a1">
      text1
    </td>
  </tr>
</table>

Answer 3

Answer №2

One way to achieve this is by using the ::after pseudo-element. While adding an outline can help visualize the 100px offset, it may not always be necessary.

#a1 {
  outline: red 1px solid
}

#a1::after {
  content: '\a0';
  display: inline-block;
  width: 40px;
  background: #000;
  transform: translateX(50px)
}

<table>
  <tr>
    <th style="width:200px">
      col1
    </th>
  </tr>
  <tr>
    <td id="a1">
      text1
    </td>
  </tr>
</table>

Answer 4

One way to achieve this is by using the ::after pseudo-element. While adding an outline can help visualize the 100px offset, it may not always be necessary.

#a1 {
  outline: red 1px solid
}

#a1::after {
  content: '\a0';
  display: inline-block;
  width: 40px;
  background: #000;
  transform: translateX(50px)
}

<table>
  <tr>
    <th style="width:200px">
      col1
    </th>
  </tr>
  <tr>
    <td id="a1">
      text1
    </td>
  </tr>
</table>

Use CSS to insert a solid rectangle into the contents of a table cell

Answer №1

Answer №2

Similar questions

Header Blocks that are Fixed While Scrolling in fullPage.js Sections Using the "scrollOverflow: true" Feature

Tips for aligning the image and text in the center of the page

Can an unordered list be nested inside an inline list item in HTML or XHTML?

The text alongside the radio button is not aligned vertically

How can I modify the color of a jQuery Mobile Select menu?

The :first selector examines the parent's parent as a reference point, rather than the immediate

Is there a competitive edge in defining Css Selector with symbols versus without symbols in Selenium Test Automation?

Is it possible to create a collapse and expand animation that does not involve transitioning the `height

Utilizing the predefined color palette of Bootstrap for styling text in a

Text color wave effect - mimic a block of colors flowing through text

Implementing a tooltip popup inside the header cell of the ordering table

Creating a radio button along with a submit button that redirects to a different local HTML file

The navigation icon on my website refuses to close

Is it possible to break a single word when word wrapping?

Updating text color with Ajax response value

The page container does not have a specified height

An ordered list placed within a div container in an HTML document

How can I retrieve the current background color and revert it back after a .hover event?

Password confirmation on the login screen will be displayed in a single line

Emphasizing buttons that are in a "pressed" or "inactive" state