CODEWITHSUNDEEP
htmlcsshtml-table
Maysam
Maysam

Reputation: 521

How to set a table cell 2 colors?

How to create <td> with 2 colors?

This is my code :

<table cellspacing=0>
   <tr>
    <td bgcolor=green><img src='pic/s.gif' width=8 height=5></td>
    <td bgcolor=#AAAAAA><img src='pic/s.gif' width=72 height=5></td>
    <td style="color: green;">10%</td>
   </tr>
</table>

but I want use one td and write 10% on td with z-index=1 but I don't know how.

enter image description here

Upvotes: 10

Views: 2685

Answers (4)

TimSPQR
TimSPQR

Reputation: 2984

Interesting concept, but do you really need a table layout?

Here's a FIDDLE with a slightly different approach.

HTML

<table>
    <tr><td>
            <div class='celldiv'>20%
                <div class='variablediv'></div>
            </div>
        </td></tr>
</table>

CSS

td {
    height: 20px;
    width: 100px;
    padding-left: 30px;
}
.celldiv {
    height: 100%;
    width: 100%;
    background-color: red;
}
.variablediv {
    float: left;
    height: 100%;
    width: 20%;
    background-color: blue;
    margin-right: 5px;
}

And you can dynamically change the width of the blue and the number with jQuery.

Just an idea.

Upvotes: 3

G-Cyrillus
G-Cyrillus

Reputation: 105873

you have many possibilities cross browser and not : demo http://codepen.io/anon/pen/zDAof

  • inset shadow,
  • linear-gradient -
  • background-image
  • a mixed or else ?
table {
  width:100%;
  height:100px;
}
td {
  background:red;
  padding-left:11%;
}
tr:first-child td {
  box-shadow:inset  10vw 0  0  green
}
tr:nth-child(2) td {
  background:linear-gradient(
    to right, 
    green 0,
    green 10%,
    transparent 10%,
    transparent 100%
  ) red;
}tr:nth-child(3) td {
  background:url(http://dummyimage.com/2000x1/ff0000/ff0000) repeat-y right green;
  background-size:90%;
}
tr:last-child td {
  background:linear-gradient(to right,
    green,
    green 10%,
    red 10%,
    red);
}

html for demo :

<table>
  <tr>
    <td> inset shadow
    </td>
  </tr>
  <tr>
    <td> Linear- gradient + bg color
    </td>
  </tr>
    <tr>
    <td>
      background-image repeat-y
    </td>
  </tr>
  <tr>
    <td>
      linear-gradient
    </td>
  </tr>
</table>

Upvotes: 0

KM123
KM123

Reputation: 1377

I think that the best way you could do this would to be create an image in something like photoshop and chose the two colours that you want to use and space them out as you want. Then do something like this with the code:

<table>
    <tr>
        <td style="background-image:url('test/test.jpg');background-size:cover;">
            <table width="100%">
                <tr>
                     <td width="10%">10%</td>
                     <td width="90%">90%</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Hope this helps!

Upvotes: 0

Karuppiah RK
Karuppiah RK

Reputation: 3964

I hope you are expecting the result like this...

DEMO JsFiddle

HTML 

    <table>
       <tr>
           <td class="red"></td>
           <td class="green"><span class="ten">10%</span></td>
       </tr>
    </table>

CSS

table
{
    border-collapse: collapse;
}
.red
{
    background-color: red;
    width: 10px;
    height: 5px;
}
.green
{
    background-color: green;
    width: 90px;
    height: 5px;
}
.ten
{
    color: #ffffff;
}

Upvotes: 1

Related Questions