selecting first td from all rows using css selector - html

Here is my html
<table id="mytable" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr >
<td>1888</td>
<td>Michael</td>
</tr>
<tr>
<td>1886</td>
<td>Bosco</td>
</tr>
<tr>
<td>955</td>
<td>Raj</td>
</tr>
</tbody>
</table>
i want to select first td from all rows
So output will be 1888, 1886, 955
I tried this table[id='mytable'] tr:nth-child
but it throws error.
Can someone help?


To achieve what you want you need to change the selector you're using to: table[id='mytable'] tr td:first-child. This will select the first td in every tr in the table with the ID mytable
The code in the snippet is just an example of how to apply it
$(document).ready(function() {
$("table[id='mytable'] tr td:first-child").css({'background-color':'pink'});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr >
<td>1888</td>
<td>Michael</td>
</tr>
<tr>
<td>1886</td>
<td>Bosco</td>
</tr>
<tr>
<td>955</td>
<td>Raj</td>
</tr>
</tbody>
</table>
Hope this helps!


You should use first-child selector on td elements:
#mytable td:first-child {
background: red;
}

Related

Apply :not in nested table

table.parent td:nth-of-type(1):not(table.nested td){
color: red;
}
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
I have a nested table as follows -
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
Requirement - Only TEXTA and TEXTB should be colored in red. In real scenario there are many rows. I want only the first td of each row in the parent table to be colored. I am doing something like -
table.parent td:nth-of-type(1):not(table.nested td){
color: red;
}
This is not giving me any result. What is the correct way of achieving this?

Spent a while playing around with this. The best I can do is to suggest using 2 lines of CSS rather than 1. One selector to do all of the first row of td and one to set the nested ones back to how they belong.
table.parent tr:first-child td {
color: red;
}
table.nested tr:first-child td {
color: black;
}
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>

You said that..
I want only the first td of each row in the parent table to be colored
So, I am assuming you want TEXTA and TEXTC to be colored (and not TEXTB as you stated).
If thats the case, then your idea was to select elements (first td of each row) if they dont contain a specific child element (table.nested).
This is not possible with CSS2 or CSS3.
The CSS2 and CSS3 selector specifications do not allow for any sort of parent selection.
See CSS selector - element with a given child
Edit
You can use jquery/javascript to do so.
For example, to add opacity and color css properties:
$(document).ready(function(){
$('table.parent > tbody > tr > td:first-child').each(function(){
if ($(this).has('table.nested').length == 0){
$(this).css('opacity', '0.5');
$(this).css('color', 'red');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>

Just give some class to TEXTA & TEXTB
for example:
(html)
<td class="red-color-text">TEXTA</td>
<td class="red-color-text">TEXTB</td>
(css)
.red-color-text{color: red;}

Why doesn't inner tbody stretch?

I have a problem with table. This is my code:
<table class="employers__table">
<thead>
<tr>
<td>Таб. №</td>
<td>Сотрудник / СИЗ</td>
<td>Разм. ряд</td>
<td>Кол.</td>
<td>Ед. изм.</td>
<td>Дата выдачи</td>
<td>Дата замены</td>
<td>Списать СИЗ</td>
<td>Продлить СИЗ</td>
</tr>
</thead>
<tbody>
<tbody class="label">
<tr>
<td colspan="9">
Aaa
</td>
</tr>
</tbody>
</tbody>
</table>
.employers__table {
overflow-y: scroll;
}
.label tr > td {
background-color: #000;
color: #fff;
}
Inner <tbody> doesn't stretch. This is how it looks.
Why does this happen?
I tried to create a table with the same structure in the new project, and it worked there...I don't understand.

You are basically going against the basic semantics of HTML TABLE.
It allows you to have multiple <tbody> inside a table, but not nested tbody
<TABLE>
<THEAD>
<TR> ...header information...
</THEAD>
<TFOOT>
<TR> ...footer information...
</TFOOT>
<TBODY>
<TR> ...first row of block one data...
<TR> ...second row of block one data...
</TBODY>
<TBODY>
<TR> ...first row of block two data...
<TR> ...second row of block two data...
<TR> ...third row of block two data...
</TBODY>
</TABLE>
Corrected Snippet
.employers__table {
overflow-y: scroll;
}
.label tr>td {
background-color: #000;
color: #fff;
}
<table class="employers__table">
<thead>
<tr>
<td>Таб. №</td>
<td>Сотрудник / СИЗ</td>
<td>Разм. ряд</td>
<td>Кол.</td>
<td>Ед. изм.</td>
<td>Дата выдачи</td>
<td>Дата замены</td>
<td>Списать СИЗ</td>
<td>Продлить СИЗ</td>
</tr>
</thead>
<tbody class="label">
<tr>
<td colspan="9">
Aaa
</td>
</tr>
</tbody>
</table>

How to remove border from a bootstrap table-responsive?

Hello I'm trying to remove border from my table.
Here's my code :
<table class="table table-responsive" style="border:none">
<tr>
<th>First name</th>
<th>Last name </th>
</tr>
<tr>
<td>Tima</td>
<td>Zahra</td>
</tr>
<tr>
<td>Emily</td>
<td>SMITH</td>
</tr>
</table>
But it's not working. Please help me ! I'm sorry for my bad english and I hope you will understand it.

Just use following css:
.table thead tr th, .table tbody tr td {
border: none;
}

Just do following changes in head section
<style>
.borderless tr, .borderless td, .borderless th {
border: none !important;
}
</style>
and this changes in body section:
<table class="table table-responsive borderless">
<tr> <th>First name</th><th>Last name </th></tr>
<tr> <td>Tima</td> <td>Zahra</td> </tr>
<tr><td>Emily</td> <td>SMITH</td> </tr>
</table>
This will helpful to you. Thank you :)

Use the table-borderless bootstrap class. Note my table below has zebra stripes, but that is because I wanted them and has no impact on the table border. If you don't want stripes either, just remove table-striped.
<table class="table table-striped table-borderless">
<thead>
<tr>
<th scope="col">Pos</th>
<th scope="col">Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Adam</td>
</tr>
</tbody>
</table>

efficient way to select odd rows and specific cell within a table using css

I have following example table:
<table id="inputTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mike</td>
</tr>
<tr>
<td>2</td>
<td>eric</td>
</tr>
<tr>
<td>3</td>
<td>jonas</td>
</tr>
</tbody>
</table>
I was wondering how may I be able to select every odd row and 2nd cell within the table?
I came up with this:
#inputTable tbody tr:nth-child(odd) td:nth-child(2){
background-color: red;
}
but it didn't work. Anyone has any solution?

Your CSS did not work because it targets #mainTable but your HTML says id="inputTable".

tr:nth-child(odd) td:nth-child(2){
background-color: red;
}
<table id="inputTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mike</td>
</tr>
<tr>
<td>2</td>
<td>eric</td>
</tr>
<tr>
<td>3</td>
<td>jonas</td>
</tr>
</tbody>
</table>

try to something like this for odd even selection using css.
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

How to get tr:nth-of-type(odd) for entire table not group (thead, tbody)?

Using CSS I set the zebra-striping background color for tables using tr:nth-of-type(odd). Of course, this is the first child of parent. Is there a way to specify this is the index for the table instead of the parent groups? For example, here is the outcome:
tr:nth-of-type(odd) { background: blue; }
<table>
<thead>
<tr>Blue
<tr>
<tr>Blue
</thead>
<tbody>
<tr>Blue
<tr>
<tr>Blue
</tbody>
<tfoot>
<tr>Blue
</tfoot>
</table>
What I would like:
tr:nth-of-type(odd) { background: blue; }
<table>
<thead>
<tr>Blue
<tr>
<tr>Blue
</thead>
<tbody>
<tr>
<tr>Blue
<tr>
</tbody>
<tfoot>
<tr>Blue
</tfoot>
</table>
Pictures for posterity:

I'm not aware of how to do this using 100% CSS :/
BUT! Of course you don't have to use thead/tfoot as the only required element is tbody ;)
SO, this JSFiddle is has the row coloring you want!
You could class the faux thead/tfoot rows in a class if you like :)
<table>
<tbody>
<tr><th>faux thead blue</th></tr>
<tr><th>faux thead not</th></tr>
<tr><th>faux thead blue</th></tr>
<tr><td>not</td></tr>
<tr><td>Blue</td></tr>
<tr><td>not</td></tr>
<tr><th>faux tfoot blue</th></tr>
<tr><th>faux tfoot not</th></tr>
<tr><th>faux tfoot blue</th></tr>
</tbody>
</table>
But in case you HAVE to use thead/tfoot, you could use the preceding, er, *cough* following *cough* jQuery/JS:
$("table").each(function(){ $(this).find("tr:even").css('background', '#e1e9f0'); });