Create a dynamic table with varying colored cells using HTML and CSS

Question

Create a dynamic table with varying colored cells using HTML and CSS

I currently have a table setup where a td element can be styled with a single background color:

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

This is achieved using the following code:

<td colspan="1" style="background: cyan; position:relative;" ><span class="CellComment" class="smallCell">Version 1.0</td>

However, in specific cases, I wanted to divide the td into multiple colors. I attempted this by adding several div elements inside the td, each with its own background color (each div should take up equal space within the td).

It needs to be dynamic so that the same code can handle both the one-color and multi-color scenarios. If there's only one color, the corresponding div should fill the entire td.

The code I used for this approach is:

<td colspan="1"><div style="background-color:cyan; position:absolute;"></div><span class="CellComment" class="smallCell">Version 1.0</td>

(the span represents a popup that appears when hovering over the text)

Despite my efforts, the outcome was not as expected:

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

Even when using just one div, it only occupies half of the available space within the td.

html css html-table

Answer 1

Answer №1

Want to add multiple colors inside a single div (or td) without any hassle? Simply use

background: repeating-linear-gradient(90deg, #DF0000, #DF0000 50px, #000000 50px, #000000 100px)

.

#normal{
 background-color: black;
}
#split {
  background: repeating-linear-gradient(90deg, #DF0000, #DF0000 50px, #000000 50px, #000000 100px)
}
#split3{
background: repeating-linear-gradient(90deg,#DF0000, #DF0000 33px,#4286f4 33px, #4286f4 66px,#000000 66px, #000000 100px)
}
div{
  width: 100px;
  height: 100px;
  margin: 10px;
  float: left;
}

<div id="normal">
</div>
<div id="split">
</div>
<div id="split3">
</div>

Answer 2

Want to add multiple colors inside a single div (or td) without any hassle? Simply use

background: repeating-linear-gradient(90deg, #DF0000, #DF0000 50px, #000000 50px, #000000 100px)

.

#normal{
 background-color: black;
}
#split {
  background: repeating-linear-gradient(90deg, #DF0000, #DF0000 50px, #000000 50px, #000000 100px)
}
#split3{
background: repeating-linear-gradient(90deg,#DF0000, #DF0000 33px,#4286f4 33px, #4286f4 66px,#000000 66px, #000000 100px)
}
div{
  width: 100px;
  height: 100px;
  margin: 10px;
  float: left;
}

<div id="normal">
</div>
<div id="split">
</div>
<div id="split3">
</div>

Create a dynamic table with varying colored cells using HTML and CSS

Answer №1

Similar questions

Tips for altering value by selecting radio buttons

What is the process of securing a directory with a password using Node.js and Express?

Whenever I include an onClick event to a div element, the entire webpage fails to display

Error encountered when attempting to utilize a variable within an EJS template document

What is the correct method for handling images in HTML and CSS?

How can I identify when a browser window is maximized using JavaScript or CSS?

Issues with Thunderbird not displaying copied HTML emails

Troubleshooting a JQuery accordion malfunction within a table

Issues with displaying search form div using jQuery AJAX

Trouble Aligning HTML Button to the Right

Is there a way to shift this structure to the right without relying on the float property?

CSS3: What is causing this issue in FireFox?

Meteor: utilizing the background image for the body

Tips for updating a div element while maintaining its style and select2 plugin functionality with jQuery

What is the best way to create spacing between images in a CSS image slider?

Issue with jQuery: Changing colors does not work on Chrome and Safarirowsers

What is the best way to handle images overflowing a div

Reduce multiple paragraphs in PHP to a more concise form

swapping between two lines within a div

Show a table when a button is clicked using Javascript