I want to add css class to td which is created dynamically and this is portion of my code
var newTD = document.createElement("td");
td is created but border is not coming.
td is added into table properly when user clicks on plus button.css is not applied.
css class is
table.ms_grid td, table.ms_grid table td
{
padding: 3px 5px;
border: 1px #D3E4F5 solid;
cursor: pointer;
}
this code is part of my project
please suggest solution.
Most table cell borders won't display unless there's something within.
The old method was to add a inside however I believe there's a CSS property to always show borders. Will edit if I find it.
There it is, empty-cells, supported in everything (current) except IE7 and below
Related
I have grid with kendo when i changed selected row background-color but when i selected row it has also shows me border-bottom as in image
I want to delete that blue line.Also i tried the css like this but not worked.
.k-grid .k-state-selected tr {
border-bottom: none;
}
How to solve this?
From looking at the Kendo Grid's page on grid selection, it looks like it is the row (tr) which has the class k-state-selected.
The above CSS selector that you've attempted to use says that the element you're trying to style is a tr tag that is an ancestor of the element with the class k-state-selected.
This is not true as the row itself is what has that class. You can fix it like so:
.k-grid tr.k-state-selected {
border-bottom: none;
}
In my ASP.NET's MVC application, table style in site.css file is defined as:
table {
border-collapse: collapse;
border-spacing: 0;
margin-top: 1em;
border: 0 none;
}
When I'm creating a table and setting explicitly the border property in my HTML, this style in css is overriding the border property. Result is I'm not able to see borders in my table. This is my table variable:
tableT = '<table border="1" style="float:center" id="itemList"><thead><tr><td></td><td>Total</td><td>Completed</td><td>Inprogress</td><td>Pending</td></tr></thead><tbody></tbody></table>',
I want a table with borders, I don't want to change site.css as everywhere else that is being used.
You could try using an inline style with an !important rule:
<table border="1" style="float:center; border: 1px solid !important;" id="itemList">
However, this is quite a messy hack, and Germain's answer from the comments would be a more elegant solution - it depends if you are able/inclined to edit your CSS file.
I'm using the "ngTable" component (enter link description here) in my AngularJS app to present tabular data. It's a little simpler to use than ngGrid, and I don't like how ngGrid configures your table (I especially don't like putting the table header strings in javascript, instead of in the HTML).
Although ngTable works well enough, there appear to be some limitations in its configurability. For instance, I'd like to just add column separators to the header and cells. The way ngTable is referenced in HTML, you don't specify the table header elements, just the cells. I suppose I could put a class on the "td" elements to add separators to the cells, but that wouldn't affect the header.
Anyone got some ideas of how to do this?
You can just do that in CSS
table.ng-table thead th:not(:first-child) {
border-left: 1px solid red;
}
table.ng-table thead th:not(:last-child) {
border-right: 1px solid red;
}
table.ng-table tbody td:not(:first-child) {
border-left: 1px solid blue;
}
table.ng-table tbody td:not(:last-child) {
border-right: 1px solid blue;
}
Example here: http://plnkr.co/edit/t77lzM1o6Xh2PBnhZqw6?p=preview
The only downside to this approach is that it won't work in IE <9.
To get it to work on IE <9 then you would have to add classes to each column when you define the <td> and match them in css.
If you only want a border for a specific column then the css is actually easier as you can just add a class to the column you want the border on and then in your css just add a border-left or border-right for that td.col-style-name
I'm trying to develop a table that hides its columns upon a given value. I am using a solution discussed in another SO question. As part of the suggestion there they say that to support IE<8 browsers a hide rule should be used instead and show by default. (My browser is in quirks mode).
I have several hide rules that look like the following.
table.Show1 .cellType2, table.Show1 .cellType3{
display:none;
}
So what I expect is cellType2 and cellType3 to hide when the className of the table is changed dynamically. With the initial values it works fine but when the className of the table changes dynamically, it hides the cells needed but it doesn't bring the other back.
I went through it with IE Developer Tool and I know that the className of the table is set properly. I also inspected the cell element's style and there is no display rule set so I would expect to display as default, but it isn't(it doesn't show up).
What I found most annoying it that if I change ANY style property in the Developer Tool, it will realize that it should be displaying the cell and then , it brings it back up.
Why the style is not applied? Please help me fix this issue.
EDIT:
I'm including a "minimal" code to recreate the issue.
JavaScript:
function typeChanged(name, id)
{
var elem = document.getElementById(id);
elem.className = name;
}
CSS:
table td
{
border-top: 1px none #000066;
border-right: 1px none #000066;
border-bottom: 1px solid #000066;
border-left: 1px solid #000066;
}
table.Show1 .cellType2, table.Show2 .cellType1{
display:none;
}
table.Show1 td,table.Show2 td
{
border-style: solid solid solid solid;
border-width: 1px;
}
table.Show1 th,table.Show2 th,table.Show1,table.Show2
{
background: transparent none repeat scroll 0% 0%;
color: #000066;
border-style: none none none none;
table-layout: fixed;
}
HTML:
<select onChange="typeChanged(this.options[this.selectedIndex].value,'mytable')">
<option value="Show1">Show1</option>
<option value="Show2">Show2</option>
</select>
<table id="mytable" class="Show1">
<tr>
<th class="cellType1">type1</th>
<th class="cellType2">type2-a</th>
<th class="cellType2">type2-b</th>
</tr>
<tr>
<td class="cellType1"><input type="text"></input></td>
<td class="cellType2"><input type="text"></input></td>
<td class="cellType2"><input type="text"></input></td>
</tr>
</table>
It sounds like it's not repainting the table. There are several IE 7 & 8 repaint and reflow oddies out there...
You can try forcing the repaint in your javascript, maybe just by hiding and showing the table with something like
document.getElementById('myTable').style.display='none';
document.getElementById('myTable').style.display='table';
or forcing a reflow on the entire page with something like
document.body.className=document.body.className;
It appears that there is a problem when trying to repaint the cells. Just from the CSS rule doesn't work but if we apply the display directly in the JavaScript then the cells are drawn properly. Looping trough the cells and applying the style directly works, I just had to have a name convention to easily identify the class that a cell is supposed to be.
if(isEmpty(cell.className)|| cell.className == (selectedType+"_cell"))
{
cell.style.display = 'table-cell'; // might be different for other IE versions
}
else
{
cell.style.display = 'none';
}
I want to change border colors for certain parts of a table when a button is clicked. It's a bigger project, but I've been able to recreate the problem here -
http://jsfiddle.net/RZ7UP/8/
CSS:
table, tr, td
{
border:1px solid #999;
padding:8px;
border-collapse: collapse;
background-color: #FFF;
}
/*comment this line out and it works*/
#div1 table, #div1 td { border-color:White;}
.colorborder{border:1px solid Red}
The css style "table, tr, td" is in a css file used by all pages in the project. However, for this particular page, I don't want the black borders which is why I thought to add the style "#div1 table, #div1 td" (note that specifying "border:none" has the same effect). However, adding that makes the jquery manipulation stop working.
Anyone know what is going on?
This is an issue with css specificity. If you use your browser's DOM debugger, you'll see that the style #div1 td is taking precedence over .colorborder. This happens because an ID is more specific than a class.
Try changing your CSS to read:
#div1 td.colorborder{border:1px solid Red}
You can read w3.org's rules for computing specificity here. It's good to understand how this works if you're going to do any serious web development with CSS.
A quick introduction to CSS specificity
In general, here's what you need to know:
Element names (tag names like li and td) have the lowest specificity...
... followed by classes and attributes (like [name=firstname])...
... followed by IDs (like #div1)...
... with highest specificity going to the inline style="..." attribute.
In addition, higher specificity is given to multiple instances of the above. So if one style is assigned to table td and another is assigned to table tbody tr td, then the second style will win out because more tag names make it more specific.
Of course, you can bump things higher by using !important in CSS, but this really shouldn't be used except in special cases (for instance, you want something with class="red" to be colored red regardless of where you use it). Otherwise, you'll find yourself using it rampantly throughout your CSS, with one !important overriding another according to the rules of specificity, and it's just generally considered sloppy coding anyway.
This line:
#div1 table, #div1 td { border-color:White;}
Is referenced by an element's ID (#), which makes it's hierarchy heigher than any other plain class rule.
in order for other rules to work, you need to add the ID selector to them, so that they can override the previous rule's hierarchy.
#div1 .colorborder{border:1px solid Red}
You have a specificity problem, meaning that the selector that has the white color has more specificity than the red.
check now: http://jsfiddle.net/RZ7UP/12/
Your problem is in CSS I think not in jQuery.
last line of your css with ...
#div1 table.colorborder, #div1 td.colorborder{border:1px solid red}
Reason being is that #div1 an ID selector will take higher priority regardless if you have the .colorborder{...} further down the page...
That's because the ID has an higher specificity as the class
Changing
#div1 table, #div1 td { border-color:White;}
to
table#div1, td#div1 { border-color:White;}
works too.