I am not able to get td:first-child to work for dynamically created <td> in statically created table.
I have the following static mark up
<table class="tblgenInfo">
#for (int i = 0; i < Model.Controls.Count(); i++)
{
if (Model.Controls[i].HtmlAttributes["section"].ToString() != "0")
{
continue;
}
<tr>
#Html.HiddenFor(x => x.Controls[i].Type)
#Html.HiddenFor(x => x.Controls[i].ID)
#Html.EditorFor(x => x.Controls[i])
</tr>
}
</table>
In the above code, #EditorFor(x => x.Control[i]) creates controls inside <td> dynamically.
I have the following CSS which works if <td>s are created statically but doesnt work for dynamically created ones.Please help.
.tblgenInfo tr td:first-child{
width: 28%;
}
Thanks
Since other elements are generated inside the tr before the td - the first-child selector won't work.
In your case, you need to use the first-of-type selector.
So your code becomes:
.tblgenInfo tr td:first-of-type {
width: 28%;
}
Maybe if you put your css in the footer so that the styling is called after the page has loaded?
<footer>
<p>your footer words</p>
<style>
.tblgenInfo tr td:first-child { width: 28%; }
</style>
</footer>
Related
I have referred to many options but still I am not able to apply CSS to my parent container. My table structure is like:
<td>
<div id="div1">
<div id="div2" class="colorMe"></div>
</div>
</td>
Now according to above structure if div2 has class colorMe then I want to color the entire td background in yellow.
I have used CSS like this but not working:
td > div> div.colorMe {
background-color:yellow;
}
Can you please tell me how I can color my td using css?
There is currently no possibility to apply CSS Rules to a parent element. There is in fact the :has Pseudoclass, which is exactly for this kind of issues, but at the moment (Nov 2017) it is not supported by any browser. The only way to achieve this would be with Javascript.
I know that you mentioned only using css but adding some javascript event to change a class is a very well documented approach. There are dozens of examples online and including the the script in your file takes no extra work if you use vanilla.
Here is a small example of changing a parent div's color on a click event
var box2 = document.querySelector('.color2');
box2.addEventListener("click", function() {
this.parentNode.style.backgroundColor = "white";
});
div {
width: 100px;
height: 100px;
border: 2px solid black;
}
.color1 {
background-color: red;
}
.color2 {
background-color: rebeccapurple;
width: 50px;
height: 20px;
}
<div class="color1">
<div class="color2"></div>
</div>
You can kind of emulate the behavior you need with the following trick:
td {
position: relative; /* make the cell a container for positioned children */
}
.colorMe::before { /* cover this container with colored pseudo element */
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color:yellow;
z-index: -1;
}
table { /* just to make the example prettier :) */
width: 100%;
height: 100px;
table-layout: fixed;
}
<table>
<tr>
<td>
Just a TD
</td>
<td>
<div id="div1">
<div id="div2" class="colorMe"></div>
</div>
</td>
<td>
Just a TD again
</td>
</tr>
</table>
It won't work, however, if you need to position something absolutely from the .colorMe element itself.
I have a table and I want each cell to have a red background if the cell is disabled, and blue if is enabled. So I have a inserted an invisible checkbox in each cell. When I have labels instead of a table, it works ok (see example here), but it´s not working with a table.
HTML:
<table id="hours">
<tbody>
<tr>
<td id="tdh00"><input type="checkbox" id="h00"></td>
<td id="tdh01"><input type="checkbox" id="h01"></td>
</tr>
</tbody>
</table>
CSS:
input[type=checkbox] { visibility: hidden; }
#hours input[type=checkbox]:checked + #tdh00 { background-color: #265BFA; }
#hours input[type=checkbox]:not(:checked) + #tdh00 { background-color: #FA2421; }
Try like below this is the solution with JQuery :
Fiddle : http://jsfiddle.net/RYh7U/138/
HTML :
<table id="hours" border="1">
<tbody>
<tr><td id="tdh00"><input type="checkbox" id="h00"></td><td id="tdh01"><input type="checkbox" id="h01"></td></tr>
</tbody>
</table>
</body>
CSS :
input[type=checkbox] { visibility: hidden; }
JQuery :
$("#hours td").each(function(e){
var ele = $(this).children('input[type=checkbox]');
var flag = ele.prop('checked');
if(flag)
{
ele.prop('checked', false);
$(this).css("background", "#265BFA");
}
else
{
ele.prop('checked', true);
$(this).css("background", "#FA2421");
}
});
$("#hours td").click(function(e){
var ele = $(this).children('input[type=checkbox]');
var flag = ele.prop('checked');
if(flag)
{
ele.prop('checked', false);
$(this).css("background", "#265BFA");
}
else
{
ele.prop('checked', true);
$(this).css("background", "#FA2421");
}
});
With your markup as it stands, this is not going to work. You are using the + (sibling) selector, but your table cells are not siblings of your checkboxes. In the example you gave, the markup is:
<div class="slideOne">
<input type="checkbox" value="None" id="slideOne" name="check" />
<label for="slideOne"></label>
</div>
Yours is:
<td id="tdh00"><input type="checkbox" id="h00"></td>
So, you are attempting to style the parent based on the state of one its child elements, which is not currently possible with CSS alone.
EDIT
Check out this working example. That fiddle adds the label back in (which will help with accessibility), and positions it in such a way that it visually does what you're after. The markup needs to be:
<table id="hours">
<tbody>
<tr>
<td id="tdh00">
<div>
<input type="checkbox" id="h00">
<label for="h00">Label</label>
</div>
</td>
<td id="tdh01">
<div>
<input type="checkbox" id="h01">
<label for="h01">Label</label>
</div>
</td>
</tr>
</tbody>
</table>
And the CSS:
table {
width: 450px;
margin: 0 auto;
}
td {
border: 1px solid #333;
padding: 0;
}
td > div { position: relative; }
input[type=checkbox] { visibility: hidden; }
label {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
text-indent: -999em;
}
input[type=checkbox]:checked + label { background-color: #265BFA; }
The extra div in each table cell is necessary, because Firefox can't handle positioning things relative to td elements.
Browser support is good, but only IE9+ is supported because we're using the :checked pseudo-class. You'll get better support with a JavaScript-based solution, but I'd argue that this is a great candidate for progressive enhancement.
EDIT 2
If support for old IE is a requirement, then you'll need to resort to JavaScript. Here's an example using jQuery.
The JavaScript just adds a class of active to the table cell: the bulk of the work is still done with CSS.
$("#hours input").on('change', function(){
var checkbox = $(this),
tableCell = checkbox.parents('td');
checkbox.is(':checked') ?
tableCell.removeClass('active') :
tableCell.addClass('active');
}).change();
The HTML remains the same, and the CSS differs only slightly with these lines replacing the :checked pseudo-class:
td { background-color: #265BFA; }
.active { background-color: red; }
I want to make a grid of around 50 columns and 50 rows with height and width of each cell to be 10px.
<!DOCTYPE html>
<html>
<head>
<style>
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
td{width:10px;}
tr{height:10px;}
</style>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
I can do this by writing the code a hundred times..
But I think there should be some more practical way of doing this by css..
Can anyone help...
I'm not sure if you can do it in css, but you can certainly do it with javascript:
<style>
td {
width: 10px;
border: 1px solid black;
}
tr {
height: 10px;
}
</style>
<script>
function makeCells() {
var t = document.createElement("TABLE");
for (var rows = 0; rows < 50; rows++) {
var newRow = document.createElement("TR");
console.log(newRow);
t.appendChild(newRow);
for (var cols = 0; cols < 50; cols++) {
var newCell = document.createElement("TD");
newRow.appendChild(newCell);
}
}
document.body.appendChild(t);
}
makeCells();
</script>
This is all you need:
td {
width:10px;
height:10px;
}
However, using a table you can't be sure the width will be always 10px for each cell, because if the window's width is less than the table width, the cells will shrink by default.
<!DOCTYPE html>
<html>
<head>
<style>
table{ border-collapse:collapse; }
table,th, td{ border: 1px solid black; }
td{width:10px;}
tr{height:10px;}
</style>
</head>
<body>
<table border="1">
<?php for($ctr=0; $ctr<=50; $ctr++){ ?>
<tr>
<?php for($ctr2=0; $ctr2<=50; $ctr2++){ ?>
<td></td>
<?php }?>
</tr>
<?php }?>
</table>
</body>
</html>
just a try
As an alternative to the other, working answers, you could try something like this.
What I've done is created 2500 <div>s with javascript, then gave them a padding of 1% in a 500px container. 1% of 500 is 5, so that gives us the 10px by 10px square. Float them all left in the container and they nicely align into this 50x50 grid.
The key code is:
div {
padding: 1%;
background: #aaa;
float: left;
}
I added alternate background colours to help show you what is there.
This won't play very nicely if you add content to the divs, but it looks like you aren't wanting to do that anyway if they are just 10px wide.
You need 50 × 50 elements anyway, and you cannot create elements in a loop in CSS or in HTML (they have no loops, as they are not programming languages). There are many different ways to generate the elements in server-side or client-side programming languages, but you first need to decide which technology to use and then use the elementary constructs of the chosen language.
I need to change td's text color based on odd/even, like this http://jsfiddle.net/N9gEG/
Actually I have a class which do this, but, I want to do from css
<table>
<tr>
<td>RED</td>
<td class="foo">BLUE</td>
<td>RED</td>
<td class="foo">BLUE</td>
</tr>
</table>
For tr odd/even I have the follow code: table tr:nth-child(even).
td {
color: blue;
}
td:nth-child(even) {
color: red;
}
This works because of rule specificity. The more specific CSS rule wins. td without anything else is less specific than td:nth-child(even), so it applies to the odd <td>s automatically.
If your jsFiddle correctly illustrates what you want, you can simply use the :nth-child selectors on the tds rather than the tr:
td { color: blue; }
td:nth-child(odd) { color: red; }
http://jsfiddle.net/N9gEG/2/
Given my limited understanding of your question, I'd suggest:
td:nth-child(even) {
color: blue;
}
td:nth-child(odd) {
color: red;
}
JS Fiddle demo.
Use jquery
.hover {background-color:green !important;}
.odd {background-color:blue}
$("#MyTable tr:odd").addClass("odd");
$("#MyTable tr").mouseover(function() { $(this).addClass("hover"); });
$("#MyTable tr").mouseout(function() { $(this).removeClass("hover"); });
I created a table without borders styling and I want it to underline a row on hover. However, I am getting pretty odd behaviour. When I move mouse over from upside down, nothing happens. In opposite direction, all touched rows get underlined and stay that way until I move mouse over in some other direction. I am pretty confused by this. I wanted to stay out of jquery for simplicity, but with jquery I get the same result. Here is the code..
<div class="information" >
<table id="summary" >
<%
foreach (KeyValuePair<long, float> pair in sums)
{ %>
<tr>
<td class="left" >Automat id: <%= pair.Key%></td>
<td class="right" ><%= pair.Value%></td>
</tr>
<% } %>
</table>
</div>
And the css applied to this div:
table
{
border-collapse: collapse;
border-spacing: 0;
text-align: center;
margin-top:.5em;
}
div.information
{
margin:1em 0;
padding:1em;
font-weight:bold;
text-align: center;
color:#C80;
background-color:#FF9;
border:1px solid #C80;
}
#summary
{
width: 715px;
margin-bottom: 5px;
}
.left
{
text-align: left;
}
.right
{
text-align: right;
}
And the faulty part:
#summary tr:hover
{
border-bottom: dotted 1px gray;
}
Anyone sees an error? Another way? And sorry for the long post.
I know this is old, but it showed up in a Google Search of mine. Browser support for styling tr is pathetic at best. Your styles need to be on the tds, like:
#summary tr:hover td {
border-bottom:solid 1px #FF9;
}
Try using JavaScript onmouseover and onmouseout events. In this events just apply and un-apply your css class.
This looks like a bug in chrome. It works well on Firefox, and not at all in IE.
(IE doesn't support :hover, border-spacing, border for collapsed <tr>s, it goes on and on...)
I've found a simple workaround for Chrome, however - simply add a bottom border for all <tr>s:
#summary tr {
border-bottom:solid 1px #FF9;
}
This will also keep your rows from changing heights and jiggle.
Ok, there seems to be a bug in the way the :hover pseudoselector is being applied to "tr". Change selector to "#summary td:hover {}". It should work.
One note to add, that does not seem too widely known, unlike every other browser tested, chrome redraws the ENTIRE table when applying styles on tr:hover. This may have been fixed in newer versions of chrome
This is VERY critical when you have a large table, chrome lags very badly.
Also, I would highly recommend having a border of the same width set on the TDs before hover, and simply match the BG color, vertical shifts like that are horrible UX. I tried reducing the padding inside the TDs by 1px to account for the border, but had some weird results (yet another reason to hate tables)
This is the way to define Script using JQuery to change row style (you should define your css).
CSS:
.hovercs {
cursor: pointer;
background-color: #70C9C4;
}
JavaScript:
$(function () {
$(document).on({
mouseenter: function () {
$(this).addClass('hovercs');
},
mouseleave: function () {
$(this).removeClass('hovercs');
}
}, 'tbody tr');
});
$(function () {
$(document).on({
mouseenter: function () {
$(this).addClass('hovercs');
},
mouseleave: function () {
$(this).removeClass('hovercs');
}
}, 'tbody tr');
});
.hovercs {
cursor: pointer;
background-color: #70C9C4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>Vipin Yadav</td>
<td>Frankfrut</td>
<td>Germany</td>
</tr>
<tr>
<td>Ramesh</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Reetika</td>
<td>Melbourne</td>
<td>Austria</td>
</tr>
</table>
</body>
</html>
$(function () {
$(document).on({
mouseenter: function () {
$(this).addClass('hovercs');
},
mouseleave: function () {
$(this).removeClass('hovercs');
}
}, 'tbody tr');
});