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
Related
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 am trying to find out if there is a way to alternate content line separator colors if possible.
For example:
The issue is that it has to be something automatic, so I'm assuming javascript would probably be required, but I can't find anything like this. I know there is some things that show you had to alternate if you have something like this. I say it has to automatically change because I'm using wordpress so one single line/snippet of code will be entered and something like javascript will need to automate the process. Any idea's?
You can use <hr /> elements between paragraphs as separators and style their colors with setting border CSS property.
CSS :
body{
text-align:center;
}
hr{
width:80%;
border-radius:5px;
}
hr:nth-of-type(1){
border: 4px solid red;
}
hr:nth-of-type(2){
border: 4px solid yellow;
}
hr:nth-of-type(3){
border: 4px solid green;
}
Screenshot :
Example :
JSFiddle
Here's something for starters: http://jsfiddle.net/3wGBb/
Take a look if your required browsers support nth-of-type CSS3 selector: http://caniuse.com/css-sel3.
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 have issues with jqGrid column width.
Few options that I have set for my grid :
autowidth: true,
shrinkToFit: true,
width : 100%,
And the change that I have done in ui.jqGrid.css is as follows:
.ui-jqgrid .ui-jqgrid-htable {
table-layout:auto;
margin:0em;
} //for header - auto table layout.
Similarly I have done for body and footer.
Hope this helps. Please let me know in case there requires any other information.
Note:
I am using the latest jqGrid.
I referred to a similar question jqGrid header width different from data column width, but it was not useful in my case.
I have figured out the reason for the problem.
I had added a CSS previously for table ( meant for my custom table) and that has overridden the jQgrid CSS causing the issue.
table td {
padding: 5px;
border: solid 1px #e8eef4;
}
table th {
padding: 6px 5px;
text-align: left;
}
So I added the specific class the above one, so that it doesn't override jqGrid.
Sorry that I did not notice and figure it out earlier.
And also the need for change in table-layout property in jqgrid-css was not required. My motive being shrinktofit and autowidth.
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