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.
Related
In this Html table , how could I insert the cells "XPath" and "XSL transformations" as each of them covers 1.5 row (the 2 cells cover equally 3 rows).
How should I use the "rowspan" attribute ?
<td rowspan = "number">table content...</td>
Another example
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ajay</td>
<!-- This cell will take up space on two rows -->
<td rowspan="2">24</td>
</tr>
<tr>
<td>Priya</td>
</tr>
</table>
I am using primeNg row expansion feature.
Code is here : https://primefaces.org/primeng/showcase/#/table/rowexpansion
I have a requirement to display yellow background for odd rows and grey background for even rows, but the additional inserted row having the child table should not be included during calculation.
Consider the below html example, where user has expanded the first row. I do not want the rows with 'table-row-expand' class to be considered in the even/odd rule. Here I want first row to have yellow color, second row to have grey color and third row to have yellow again. The expanded row should not have any background.
Note that the .table-row-expand row gets added to the DOM only when user expands the corresponding row. Kindly help me with this problem.
.table-row:nth-child(odd) {
background-color: yellow;
}
.table-row:nth-child(even) {
background-color: grey;
}
<table>
<tr class='header-row'>
<th> </th>
</tr>
<tr class='table-row'>
<td> // first row (should be gray)</td>
</tr>
<tr class='table-row-expand'>
<td> // expanded row (should not be colored)
<div>
<p-table> // child table </p-table>
</div>
</td>
</tr>
<tr class='table-row'>
<td> // second row (should be yellow)</td>
</tr>
<tr class='table-row'>
<td> // third row (should be gray)</td>
</tr>
</table>
Save yourself a headache and drop in a wee bit 'o JavaScript. You may need to put this code in a function to be called when new rows are added.
.table-row.odd {
background-color: yellow;
}
.table-row.even {
background-color: grey;
}
<table>
<tr class='header-row'>
<th> </th>
</tr>
<tr class='table-row'>
<td> // first row (should be gray)</td>
</tr>
<tr class='table-row-expand'>
<td> // expanded row (should not be colored)
<div>
<p-table> // child table </p-table>
</div>
</td>
</tr>
<tr class='table-row'>
<td> // second row (should be yellow)</td>
</tr>
<tr class='table-row'>
<td> // third row (should be gray)</td>
</tr>
</table>
<script>
const styledRows = document.querySelectorAll('.table-row');
const isOdd = n => Boolean(n % 2); // returns true if n / 2 has a remainder
styledRows.forEach((row, i) => {
row.classList.add(isOdd(i) ? 'odd' : 'even');
});
</script>
I have the following incomplete code :
if (tr.attr('data-depth') == 0 && **tr.children()** {
}
The double star marked above is incomplete.
In the above code, what i want to achieve is check for a parent row( that i am doing by checking tr.attr('data-depth')==0) and then check if that parent row has any child rows and if no child rows are present for that parent row ,then remove a custom class which i am doing between the curly braces.
How to achieve the same?
Any code sample would be very helpful.
You can check the parent row has any row as child with find('tr') and check anything has been found with .length
This code is an example. You can modify it according to your needs.
$('tr[data-depth = 0]').each(function(){
if( $(this).find('tr').length > 0)
$(this).css('background-color','red')
})
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr data-depth = 0>
<td>
<table>
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
2
</td>
</tr>
</table>
</td>
</tr>
<tr data-depth = 0 >
<td>
3
</td>
</tr>
<tr>
<td>
4
</td>
</tr>
</table>
For easier expression you must select your exact tr element
let my_row = // Your target row
if( $(my_row).data('depth') == 0 && $(my_row).find('tr').length > 0)
{
// Do something
}
I want to add two rows inside a td like below picture but I can't find any solution of this.
You can do by using nested table
http://www.corelangs.com/html/tables/table-inside-table.html
You Have Asked (How can i add tr inside td)
To have tr inside td the only way is create another table inside td than you can have tr inside td.
Example :
<table>
<tr>
<td>
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</td>
</tr>
</table>
But the image you have added it represent that you want to merge two rows for that you need to use Row Span.
Example for Row Span ( https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_rowspan )
Try using rowspan attribute in the cell.
https://www.w3schools.com/tags/att_td_rowspan.asp
Maybe you can use the rowspan attribute on td tags in your HTML: https://www.w3schools.com/tags/att_td_rowspan.asp
Example:
<table>
<tr>
<th>B/B LC NO Value USD</th>
<th>ABP Value USD</th>
<th>Exp N& Date</th>
</tr>
<tr>
<td rowspan="2">$ xxxxx<br/>$ -</td>
<td>$100</td>
<td>$50</td>
</tr>
<tr>
<td>$1</td>
<td>$80</td>
</tr>
</table>
You can give the fiels that you don't want to divide into two rowspan="2" and then skip the fields that would normally be under them.
<table>
<tr>
<td rowspan="2">Margaret Nguyen</td>
<td>427311</td>
<td><time datetime="2010-06-03">June 3, 2010</time></td>
<td>0.00</td>
</tr>
<tr>
<td>533175</td>
<td><time datetime="2011-01013">January 13, 2011</time></td>
<td>37.00</td>
</tr>
</table>
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