I have a css that I need to work on IE8. So I cannot use last-child.
As a trick I use
table#GridViewMemory tr:first-child + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr td {
display:table-cell;
}
to show the 13th row of a table.
my table only have two columns
the reason I only want to show the 13th row is because this is a gridview in aspx (vb.net) and the 13th row is the pagination (a link to click page 1 page 2 page 3 and ...)
the problem is the table is not always 12 row. on the last page of the gridview. it could be anywhere between 1 to 12 row.
is it possible to check this using css .. for example:
if 1 row then show 2nd row only
if 2 row then show 3rd row only
if 3 row then show 4rd row only
...
...
...
if 12 row then show 13th row only
<tbody><tr>
<th scope="col">Column1</th><th scope="col">Column2</th>
</tr><tr>
<td>31424-1</td><td>1</td>
</tr><tr>
<td>31275-1</td><td>1</td>
</tr><tr>
<td>31226-9</td><td>1</td>
</tr><tr>
<td>30982-1</td><td>1</td>
</tr><tr>
<td>30936-5</td><td>1</td>
</tr><tr>
<td>30915-1</td><td>1</td>
</tr><tr>
<td>30674-4</td><td>1</td>
</tr><tr>
<td>31366-5</td><td>2</td>
</tr><tr>
<td>31353-2</td><td>2</td>
</tr><tr>
<td>31353-1</td><td>2</td>
</tr><tr>
<td>31305-1</td><td>2</td>
</tr><tr>
<td>31273-1</td><td>2</td>
</tr><tr>
<td colspan="2"><table>
<tbody><tr>
<td><span>1</span></td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
</tbody></table></td>
</tr>
</tbody>
I tried using this solution but it only shows the last td cell . but not the table inside the last row. Any suggestions or comments?? Thanks
table#GridViewMemory tr td[colspan="2"] {
display:table-cell;
}
This is unpossible with a modern and easy way. Because IE8 is at least a crap browser. The best way is to set a class in the lastchild with ASPX
Related
why Header1 and Header2 not exists in all page in print landscape
https://fiddle.jshell.net/6mvucked/
seems height header is limit. if more than a value to be not show in all page
why ?
ٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍ
Your javascript will append 100 rows to only those containers whose id is "test".
So if you want the same to happen with the tbody of header, then simply write
<tbody id="test">
in the one in the header.
But in that case, it will only print 100 rows for the header tbody and not the other second tbody, as Javascript will append 100 rows to the 1st tag with id="test".
So if you need to append 100 or x number of rows to both or many tbody, then give them separate ids and hence write separate functions for them in javascript.
Like this:
<table>
<teahd>
<tr>
<td>ok , no problem, but show only in first page and not repeat</td>
<td>
<table>
<tbody id="test-one">
<tr><td>header not be shown if this code(table) here</td></tr>
</tbody>
</table>
</td>
</tr>
</teahd>
<tbody id="test-two">
</tbody>
<tfoot>
<tr>
<td>no problem</td>
</tr>
</tfoot>
</table>
And the javascript functions like:
for(var i=1;i<=100; i++)
$('#test-one').append('<tr><td colspan="2">row '+i+'</td></tr>');
$('#test-two').append('<tr><td colspan="2">row '+i+'</td></tr>');
Say for example I have a table layout like this
<table>
<tr>
<td id="AEimage1">
row 1 cell 1
</td>
<td id="AEimage2">
row 1 cell 2
</td>
</tr>
<tr>
<td id="setup1">
row 2 cell 1
</td>
<td>
row 2 cell 2
</td>
<td>
row 2 cell 3
</td>
<td>
row 2 cell 4
</td>
</tr>
</table>
How would I call to an individual row and cell in CSS? So say I wanted to call to [Row2, cell 1], how would I do this? I've tried stacking the elements in CSS like the following:
#LinkCSS table tr tr td {
But this has not worked for me. What am I doing wrong?
(As a note I realize I can give the cells ID's, and call to them this way. But this is not working for me).
You can use the :nth-child selector and the :first-child selector like this:
table tr:nth-child(2) td:first-child {
color:red;
}
Demo.
I'm using twitter bootstrap but i dont think that makes a difference to what I'm doing.
Basically I have a table. I'm testing the length of an enumerable that is filling the table and the last row i want to "pad" to the full length of the container i.e. if its less than 10 rows i want to add a row that has a rowspan that is 10 - item.count... however, its just rendering a blank row... is this intentional or am i doing something wrong? Here is a fiddle:
http://jsfiddle.net/L46FX/37/
and here is a table... any help would be appreciated...
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>#TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<td colspan="4" rowspan="10">
this should be a row that is 10 rows long...
</td>
</tr>
</tbody>
</table>
EDIT:
As suggested, javascript seems to be the answer... this is what I came up with, it tests the line-height due to the fact my tables are in a tab so the height attribute came back with 0 because they weren't currently in a active tab..
$('.stretch').each(function () {
var rows = $(this).rowCount();
if (rows < 10) {
var lr = $(this).children('tbody').children('tr:last');
var bg = lr.children('td').first().css('background-color');
var ht = lr.css('line-height').replace('px', '') * (10 - rows);
var row = '<td colspan="' + lr.children('td').length + '"></td>';
$(this).children('tbody').append('<tr style="height: ' + ht + 'px; background-color: ' + bg + '">' + row + '</tr>');
}
});
Also to clarify what I was doing... I really hate it when a table renders 1 row, it just looks so ugly :) I tend to put action items for the table in the footer so this attempts to fill the container with a giant row and anchors the tfoot to the bottom of the parent or very close to it....
Not sure I completely understand... but here is what I think...
rowspan is used incorrectly in your code. It will only increase the height of a tr if the column has rows beside it. See this example: http://reference.sitepoint.com/html/th/rowspan
If you want to expand the last row to 10x its size, you could use some script as follows:
var a = $( "tr" ).last().height();
$( "tr" ).last().css('height',a * 10 + 'px');
Here's the demo: http://jsfiddle.net/L46FX/38/
You mean the CELL should be 10 COLUMNS long. You are mixing up the meanings of "row" and "column" (col) and also "row" and "cell".
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
<tr>
<td colspan="10">this should be a CELL that is 10 COLUMNS long...</td>
</tr>
Of course your table first needs to have 10 columns and yours does not.
I didn't understand real problem, but it you want last table cell <td> spans 10 rows, than you used it incorrectly.
This is not a valid html. If you give rowspan into last row table-cell than, there is no space to spans table-cell.
ROWSPAN: This attribute specifies the number of rows spanned by the current cell. The default value of this attribute is one ("1"). The value zero ("0") means that the cell spans all rows from the current row to the last row of the table section (THEAD, TBODY, or TFOOT) in which the cell is defined.
Read table specification
See this
I have 2 occourances of same td in 2 different tables.
I am able to get the value 'Yes' for the 1st one using this:
//h:td[1][*[contains(.,'Loudspeaker')]]/../h:td[last()]/text()
but not getting the value 'Voice 75dB / Noise 66dB / Ring 75dB' for the 2nd one.
I tried:
//h:td[2][*[contains(.,'Loudspeaker')]]/../h:td[last()]/text()
I am very new to html and xpath so please bear with me.
portion of my html:
</table><table cellspacing="0">
<tr>
<th rowspan="3" scope="row">Sound</th>
<td class="ttl">Alert types</td>
<td class="nfo">Vibration; MP3, WAV ringtones</td>
</tr>
<tr>
<td class="ttl">Loudspeaker </td>
<td class="nfo">Yes</td>
</tr>
.
.
<table cellspacing="0">
<tr>
<th rowspan="5" scope="row">Tests</th>
<td class="ttl">Display</td>
<td class="nfo">
<a class="noUnd" href="http://xyz.php">Contrast ratio: Infinite (nominal) / 3.419:1 (sunlight)</a></td>
</tr><tr>
<td class="ttl">Loudspeaker</td>
<td class="nfo">
<a class="noUnd" href="http://xyz.php">Voice 75dB / Noise 66dB / Ring 75dB</a></td>
</tr><tr>
..
Thanks in Advance.
The only difference between these two snippets is that in the second one your text is nested within an a element. So it has to be
//h:td[2][*[contains(.,'Loudspeaker')]]/../h:td[last()]/h:a/text()
(I guess you have a namespace definition for h as you use it in your XPath.
What you are doing is:
//h:td[2] find each second td in the whole document (main issue here, because there is no second td with text "Loudspeaker" ).
[*[contains(.,'Loudspeaker')]] check if this (second td) has a child with text Loudspeaker in any children.
/../h:td[last()]/text() get the text of last td off parent.
But what you seem like to do is something like:
(//h:tr[h:td/*[contains(.,'Loudspeaker')]]) find all tr with has text "Loudspeaker"
[2] select the second of this trs.
/h:td[last()]/. text of any children of last td of this second found tr.
Therefor try (not tested!):
(//h:tr[h:td/*[contains(.,'Loudspeaker')]])[2]/h:td[last()]/.
public string FindElementUsingOneTrTwoTd(string tblName, string className, string searchString)
{
return "//*[#id=\"" + tblName + "\"]/tbody/tr/td[contains(normalize-space(#class), \"" + className + "\") and contains(string(),\"" + searchString + "\")]/../td[2]";
}
I have a table structure as below:
<table>
<tr id="tr1">
<td></td>
<td></td>
</tr>
<tr id="tr2">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr3">
<td></td>
<td></td>
</tr>
</table>
Now it has 2 columns each in first and last row . And 4 columns in 2nd row. Now if i want to add one more column to the last row correspondent to the 4th column in 2nd row , i knw that i should append one empty td to last row and then add that column. But this empty td joining is not possible in all the cases . So how to add columns randomly and manage the structure of table?? Can i get any help??
is this what you want?
$(document).ready(function(){
addCol("tr3", 4);
});
function addCol(rowid, coldes){
var tr = $("#" + rowid + " td");
var trctr = tr.length;
troffset = coldes - trctr;
alert(troffset);
for(var i = 1; i <= troffset; i++){
tr.parent().append("<td></td>");
}
}
http://jsfiddle.net/djb78/1/
You can't do that. You must merge some cells and remove their borders.
rowspan and colspan attributes will help
Handling HTML tables manually (adding columns etc.) is quite problematic, but there are some libraries for tables / data presentation that may help you.
Datatables
http://www.datatables.net/
Flexigrid
http://www.flexigrid.info/
SlickGrid
https://github.com/mleibman/SlickGrid
jqGrid
http://www.trirand.com/blog/
dgrid and DojoX Data Grids
http://dojotoolkit.org/features/desktop.php