Fill Background Color entire TD - javascript

I have this code:
body {
background-color: #2c3e50;
}
#td_design {
background-color: #f39c12;
color: #FFFFFF;
}
<table>
<tr>
<td id="td_design">
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
</table>
I tried putting a color on the body to test if the TD's Color actually expands through. Here's the result:
I know this can be fixed by adding the id = "td_design" on the <table> instead on the <td> but I can't since I want to add different background-color to each td . How can I make the TD's color extend to the whole page?


Tables, by default, have some spacing between cells.
You can remove this spacing using one of the following:
border-collapse: collapse;
/* OR */
border-spacing: 0;
If your table has no borders then you can use whichever one you want. If you do start adding borders, then collapse will start merging borders together (which can lead to interesting effects...) while border-spacing will just put them side-by-side with no gap.
Here's some demos:
table {
margin-bottom: 16px;
background-color: black;
}
td {
background-color: #cfc;
}
#tbl_2 {border-spacing: 0}
#tbl_3 {border-collapse: collapse}
#tbl_4 td {border: 1px solid #3cf}
#tbl_5 {border-spacing: 0}
#tbl_5 td {border: 1px solid #3cf}
#tbl_6 {border-collapse: collapse}
#tbl_6 td {border: 1px solid #3cf}
#tbl_7 {border-collapse: collapse}
#tbl_7 td {border: 1px solid #3cf}
td.red {
border-color: #f66 !important;
background-color: #fcc !important;
}
td.red.fix {
border-style: double !important;
}
Default
<table id="tbl_1"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>
Spacing 0
<table id="tbl_2"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>
Collapse
<table id="tbl_3"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>
Default with cell borders
<table id="tbl_4"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>
Spacing 0 (note double width on middle borders, and blue/red together)
<table id="tbl_5"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>
Collapse (note loss of red borders in middle)
<table id="tbl_6"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>
Double-style "fix" to make the red border more "important" in collapse priority
<table id="tbl_7"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red fix">X2Y2</td></tr></table>


Make sure in your css that you have all spacing and padding set to 0px


Try this code:
I added different class as per requirement (different color for each TD).
added 3 classes namely td_design1, td_design2 and td_design3 each with different color.
So this will call different class style for different table TD.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
body {
background-color: #2c3e50;
}
#td_design1 {
background-color: #f39c12;
color: #FFFFFF;
}
#td_design2 {
background-color: #559542;
color: #FFFFFF;
}
#td_design3 {
background-color: #f00112;
color: #FFFFFF;
}
</style>
<table>
<tr>
<td id = "td_design1">
asdasd
</td>
<td id = "td_design2">
asdsajsakj
</td>
<td id = "td_design3">
asdqjwhdksad
</td>
</tr>
</table>
</body>
</html>


remove border from tr / td, this seems to be a border: 3px inset gray or close to...
body {
background-color: lightgray;
}
#td_design {
background-color: #f39c12;
color: #FFFFFF;
}
.withBorder {
border: 3px inset gray;
}
.withoutBorder{
border: none;
}
<table>
<tr>
<td id="td_design">
<h5>default navigator style</h5>
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
<tr>
<td id="td_design" class=withBorder>
<h5>with border styled</h5>
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
<tr>
<td id="td_design" class=withoutBorder>
<h5>with border none (like many browsers default)</h5>
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
</table>

Related

How to use any logic to color text in Python template using HTML?`

I am using Python to draft a Table for the mail. In the mail I will be needing to color the text if that text is of some text value. Say if the text contains "Successful" then the text will be colored as "GREEN". I am using the Python string template to make a HTML snippet.The $w__ are the variable which contains the text. I would like to change the colors of the text based on the text. Please help me out.
'''
<!DOCTYPE html>
<html>
<head>
<title>XXXXX</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th,td{
border: 1px solid black;
text-align: center;
padding: 5px;
width: 7%;
}
</style>
</head>
<body>
<p>
<p2>Hi All,</p2>
<br>
<br>
<p2>SOME_TEXT</p2>
<table>
<thead>
<tr>
<th></th>
<th>22a</th>
<th>22r</th>
<th>29a</th>
<th>29c</th>
<th>ICAL</th>
<th>22g</th>
<th>22x</th>
<th>22hm</th>
<th>28a</th>
<th>20a</th>
<th>20b</th>
<th>20m</th>
</tr>
</thead>
<tbody>
<tr>
<td>AM</td>
<td>$w21</td>
<td>$w22</td>
<td>$w23 </td>
<td>$w24</td>
<td>$w25</td>
<td>$w26</td>
<td>$w27</td>
<td>$w28</td>
<td>$w29</td>
<td>$w210</td>
<td>$w211</td>
<td>$w20m_3<td>
</tr>
<tr>
<td>LA</td>
<td>$w31</td>
<td>$w32</td>
<td>$w33</td>
<td>$w34</td>
<td>$w35</td>
<td>$w36</td>
<td>$w37</td>
<td>$w38</td>
<td>$w39</td>
<td>$w310</td>
<td>$w311</td>
<td>$w20m_4<td>
</tr>
</tbody>
</table>
<p2>Best Regards</p2>
<br>
<br>
<p2>XXX ---- REGARDS(STATEMENT)</p2>
</body>
</html>
'''
s=Template(bdy).safe_substitute(w21=xxx[0][0],w22=xxx[0][1],w23=xxx[0][2],w24=xxx[0][3],w25=all[0][4],w26=all[0][5],w27=all[0][6],w28=all[0][7],
w29=all[0][8],w210=all[0][9],w211=all[0][10],w20m_3=all[0][11],
w31=xxx[1][0],w32=xxx[1][1],w33=xxx[1][2],w34=xxx[1][3],w35=all[1][4],w36=all[1][5],w37=all[1][6],w38=all[1][7],
w39=all[1][8],w310=all[1][9],w311=all[1][10],w20m_4=all[1][11])

You can use basic style to add class and append that class in td.
<style>
.success {
background: green
}
.error {
background: red
}
<style>
<td class="success">AM</td>
<td class="success">$w21</td>
<td class="error">$w21</td>
<!DOCTYPE html>
<html>
<head>
<title>XXXXX</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th,td{
border: 1px solid black;
text-align: center;
padding: 5px;
width: 7%;
}
.success {
background: green
}
.error {
background: red
}
</style>
</head>
<body>
<p>
<p2>Hi All,</p2>
<br>
<br>
<p2>SOME_TEXT</p2>
<table>
<thead>
<tr>
<th></th>
<th>22a</th>
<th>22r</th>
<th>29a</th>
<th>29c</th>
<th>ICAL</th>
<th>22g</th>
<th>22x</th>
<th>22hm</th>
<th>28a</th>
<th>20a</th>
<th>20b</th>
<th>20m</th>
</tr>
</thead>
<tbody>
<tr>
<td class="success">AM</td>
<td class="success">$w21</td>
<td>$w22</td>
<td>$w23 </td>
<td>$w24</td>
<td>$w25</td>
<td>$w26</td>
<td>$w27</td>
<td>$w28</td>
<td>$w29</td>
<td>$w210</td>
<td>$w211</td>
<td>$w20m_3<td>
</tr>
<tr>
<td>LA</td>
<td>$w31</td>
<td class="success">$w32</td>
<td>$w33</td>
<td class="error">$w34</td>
<td>$w35</td>
<td>$w36</td>
<td>$w37</td>
<td>$w38</td>
<td>$w39</td>
<td class="error" >$w310</td>
<td>$w311</td>
<td>$w20m_4<td>
</tr>
</tbody>
</table>
<p2>Best Regards</p2>
<br>
<br>
<p2>XXX ---- REGARDS(STATEMENT)</p2>
</body>
</html>

JQueryUI droppable hover class bug on scaled target

When droppable element is scaled, JQueryUI incorrectly adds/remove hover class to the elements: two 'tr' elements of scaled table get this class at once.
Is there any way to avoid this?
PS
bug ticket here
dirty fix here(codepen)
or here(github)
$('div').draggable();
$('tr').droppable({hoverClass:"highlight"});
div {
display:inline-block;
padding:3px;
border:1px solid rgba(200,0,0,.6);
}
table {
transform:scale(0.5);
border:1px solid gray;
padding:0;
border-collapse: collapse;
}
td {
padding:5px;
background: rgba(0,0,150,0.3);
}
tr.highlight td {
background: rgba(150,0,0,0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>grab me and drag over the table</div>
<table>
<tr>
<td>11111111111111111111111</td>
</tr>
<tr>
<td>222222222222222222222</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>11111111111111111111111</td>
</tr>
<tr>
<td>222222222222222222222</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
</table>

Actually transform:scale() change the element pixel ratio not its actual pixel on DOM
so why not just reduce the font-size and padding of td instead of using transform
Stack Snippet
$('div').draggable();
$('tr').droppable({
hoverClass: "highlight"
});
div {
display: inline-block;
padding: 3px;
border: 1px solid rgba(200, 0, 0, .6);
}
table {
border: 1px solid gray;
padding: 0;
border-collapse: collapse;
}
td {
padding: 2px;
background: rgba(0, 0, 150, 0.3);
font-size: 10px;
}
tr.highlight td {
background: rgba(150, 0, 0, 0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>grab me and drag over the table</div>
<table>
<tr>
<td>11111111111111111111111</td>
</tr>
<tr>
<td>222222222222222222222</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>11111111111111111111111</td>
</tr>
<tr>
<td>222222222222222222222</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
</table>

CSS style issue in table rows

I have use the className like below code snippet.
Code Snippet
<tr class="gridrowtaskIdlevel0 e-alt_row e-gridtreerowexpand">
<td class="e-rowcell ">
<div style="height: 20px;">
<div class="intend" style="width: 0px; height: 1px; float: left; display: inline-block;">
</div>
<div class="e-gridtreeexpand" style="float: left; display: inline-block;">
</div>
<div class="e-cell" style="width: 100%; display: inline-block;">
6
</div>
</div>
</td>
<td class="e-rowcell">Implementation Phase 2</td>
<td class="e-rowcell">02/15/2010</td>
<td class="e-rowcell"></td>
<td class="e-rowcell">8</td>
<td class="e-rowcell">50</td>
<td class="e-rowcell"></td>
<td class="e-extendcolumn"></td>
</tr>
Note: here class Name = gridrowtaskIdlevel0 e-alt_row e-gridtreerowexpand
i have tried to apply css style(display) for this row based on some condition like following
two ways
$('.gridrowtaskIdlevel0').addClass('e-hide');
CSS:
.e-hide{
display:none;
}
2. $('.gridrowtaskIdlevel0').css({'display':'none'});
how to apply css style to tr in runtime

Don't really understand what runtime do you mean, but if you just need make this code working - you need put it in some event: click on smth, doc.ready and etc.
Please, try such construction:
JS:
$(document).ready(function() {
$('.gridrowtaskIdlevel0').addClass('e-hide'); // the 1st way
// or
$('.gridrowtaskIdlevel0').css({'display':'none'}); // the 2nd way
// or
$('.gridrowtaskIdlevel0').hide(); // the 3rd way
});
But If you will use the 1st way you also need to add css (same to your).
I recommend use 1st or 3rd variant, but all of they will work similarly.
Good luck!

<tr>s don't always do well with all styles.
Here's an example FIDDLE that shows how you might focus on <td>s.
CSS
table {
border-collapse: collapse;
}
tbody, th, td {
padding:0px;
margin:0px;
border:0px;
border-collapse: collapse;
padding: 5px;
}
tr.foo {
border: 1px solid blue;
background-color: red;
}
tr:nth-child(3) td {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
tr:nth-child(3) td:nth-child(1){
border-left: 2px solid blue;
}
tr:nth-child(3) td:nth-child(2){
border-right: 2px solid blue;
}

Color overlap in CSS

<table border="1" class="sample">
<tr>
<th>Employee</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>EMP1</td>
<td>10000</td>
<td><input id="btn1" type="button" value="Submit">
</tr>
<tr>
<td>EMP2</td>
<td>12000</td>
<td><input id="btn2" type="button" value="Submit"></td>
</tr>
</table>
I've set the alternating color in the css. That is first row is white and second row is yellow.
The problem is the button in the second row is also getting yellow color. I've set Opacity to 0.5 so that it looks greyed out on pageload. How to remove this color overlap?
<style type="text/css">
table.sample {
border: 6px inset #8B8378;
-moz-border-radius: 6px;
}
table.sample td {
border: 1px solid black;
padding: 0.2em 2ex 0.2em 2ex;
color: black;
}
table.sample tr.d0 td {
background-color: #FCF6CF;
}
table.sample tr.d1 td {
background-color: #FEFEF2;
}
</style>

opacity makes your element see-through. An opacity of 0.5 will make the element appear 50% see-through.
The reason you can see your background colour through your input is because your input has this opacity. You're basically asking "I have added a window to my house but I can see through it, how can I prevent this?", and the answer is simply: remove the opacity.
Here is a JSFiddle demo showing 0.0 opacity, 0.5 opacity and no opacity in action: http://jsfiddle.net/JamesD/UQ48z/1.
If you want your button to have a different coloured background whilst retaining its opacity, what you can do is wrap it in a span and then give that span a background:
<td>
<span>
<input id="btn2" type="button" value="Submit">
</span>
</td>
td span { background:#fff; } /* New button background colour */
td span input { margin:0; } /* Remove the button's margins */
JSFiddle example.

Try this instead:
input {color: rgba(0,0,0,0.5);}
E.g. http://codepen.io/pageaffairs/pen/gGIiw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
table {
border: 6px inset #8B8378;
-moz-border-radius: 6px;
}
table td {
border: 1px solid black;
padding: 0.2em 2ex 0.2em 2ex;
color: black;
}
table tr td {
background-color: #FCF6CF;
}
table tr td {
background-color: #FEFEF2;
}
input {color: rgba(0,0,0,0.5);}
</style>
</head>
<body>
<table border="1" class="simple">
<tr>
<th>Employee</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>EMP1</td>
<td>10000</td>
<td><input id="btn1" type="button" value="Submit">
</tr>
<tr>
<td>EMP2</td>
<td>12000</td>
<td><input id="btn2" type="button" value="Submit"></td>
</tr>
</table>
</body>
</html>

jQuery: Change the border color of ONE table cell

I have a simple HTML table of options here:
<table>
<tr>
<td>blue</td>
<td>green</td>
</tr>
<tr>
<td>red</td>
<td>cream</td>
</tr>
</table>
The CSS with the relevant styles:
td { background-color: #FFF; border: 1px solid #3F3F3F; cursor: pointer; }
td.selected { color: #D93A2C; border: 1px solid #D93A2C; }
Looks like this:
When I click on one of the table cells, I want the border and text to be red. So I use jQuery to toggle the '.selected' class using the following code.
$('td').each(function(){
$(this).click(function(){
$(this).toggleClass('selected');
});
});
However the result is this:
The first table cell (blue) is the only one that looks as I want when selected. I need all the borders of the selected cell to be highlighted.
Any ideas on how to achieve this? I'm not opposed to ditching tables if someone can suggest a better way.

This works nicely for me:
<style type="text/css">
table { border: 1px solid #000; border-collapse: collapse; }
td { border-top: 1px solid #000; border-left: 1px solid #000; }
td.selected { border: 1px solid #F00; }
</style>
<table>
<tr>
<td>blue</td>
<td>green</td>
</tr>
<tr>
<td>red</td>
<td class="selected">yellow</td>
</tr>
</table>

Here is a very hack'ish way of getting the job done, might spark an idea on your end to produce something better... I've not fully tested it across browsers but worked on IE8,chrome,FF. Live example
HTML
<table>
<tbody>
<tr>
<td>XYZ</td>
<td>asdf</td>
<td>2346</td>
</tr>
<tr>
<td>XYZ</td>
<td>asdf</td>
<td>2346</td>
</tr>
<tr>
<td>XYZ</td>
<td>asdf</td>
<td>2346</td>
</tr>
</tbody>
</table>
JS
$('td').each(function(){
$(this).click(function(){
$(this).toggleClass('selected');
$(this).prev('td').css('border-right','#ff0000');
$(this).parent().prev('tr').find('td:nth-child('+(this.cellIndex+1)+')').css('border-bottom','#ff0000')
});
});
CSS
table{
border-collapse: collapse;
}
td { border: 1px solid #ccc; padding:3px }
.selected{
border-color:#ff0000;
color:#ff0000;
}
.selected-bottom{
border-bottom-color:#ff0000;
}
.selected-right{
border-right-color:#ff0000;
}

It's easier to put a DIV in each cell then add the treatment to the DIV.

The CSS outline may be useful here, as it may be on top of other borders (which is the problem here).

Categories