CSS of Specific Table Row

CSS of specific table row

Here is the Solution.

The HTML:

<table id="someID">
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
</table>

The CSS:

table tr:nth-child(2) {display : none;}
table tr:nth-child(3) {display : none;}

You have to use :nth-child() to hide the rows that you desire.

As most of the :nth-child() will not work for older browsers, here is the Solution for them.

The HTML:

<table id="someID">
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
</table>

The CSS:

table tr:FIRST-CHILD + tr {
display:none;
}

table tr:FIRST-CHILD + tr + tr {
display:none;
}

Hope this helps now.

Style a specific row or column of a HTML table using the css class for the table

You can try below snippet.

Here's the explanation of the :nth-child().

.style tbody>:nth-child(1) {
background: red;
}
<table class="style">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>

CSS for specific table rows

You could use a class, but better yet, don't use classes at all (HTML markup is your friend)! Here's a clean solution to your problem:

HTML

<table>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>1</td>
<td>Joe</td>
<td>Schmoe</td>
</tr>
</table>

CSS

th {
font-weight: bold;
/* More styles here */
}

td {
background: #EEE;
border-top: 1px solid #FFF;
}

tr:hover td {
cursor: pointer;
background: #CCC;
}

/* Styles upon styles */

Simply use the th element to specify the table header. To get each table data row to highlight as you mouse over it, simply use the tr:hover td rule to catch that case. See this fiddle for a working example.

CSS specific table

Just apply the .beta class selector to the entire table and change your CSS code to apply a rule only to td decedents of .beta like this:

<table class="beta">
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
.beta td {
border-style:solid;
border-top:thick double #ff0000;
}

If you need to apply the rule to multiple elements within .beta simply add an additional selector like this:

.beta td, 
.beta th {
border-style:solid;
border-top:thick double #ff0000;
}

Qapla'!

How to highlighting a specific row in html table

You can use CSS :nth-child() selector.

.mytable tr:nth-child(3),
.mytable tr:nth-child(5) {
color: white;
background: orange;
}
<table class="mytable" style="border-collapse:collapse;" border="1" cellspacing=0>
<tr>
<th> Product </th>
<th> Units </th>
<th> Sales </th>
</tr>
<tr>
<td> %% Product %% </td>
<td> %% Units %% </td>
<td> %% Sales %% </td>
</tr>
<tr>
<td> Subtotal </td>
<td> xxx </td>
<td> xxx </td>
</tr>
<tr>
<td> %% Product %% </td>
<td> %% Units %% </td>
<td> %% Sales %% </td>
</tr>
<tr>
<td> Subtotal </td>
<td> xxx </td>
<td> xxx </td>
</tr>
</table>

Style certain rows from database table in html table

Yes, you certainly can style individual rows in a table with CSS. Your provided structure doesn't actually include any table rows (<tr> elements), so you might want to fix that up first. <tbody> is not a valid child of <td>, and <td> must be contained inside a <tr>.

Once you fix up your table structure, you can target every nth row with the pseudo-selector :nth-of-type:

tr:nth-of-type(3n) {  color: #f00;}
<table>  <tr>    <td>One</td>  </tr>  <tr>    <td>Two</td>  </tr>  <tr>    <td>Three</td>  </tr>  <tr>    <td>Four</td>  </tr>  <tr>    <td>Five</td>  </tr>  <tr>    <td>Six</td>  </tr></table>

How to apply CSS to td of particular table?

This is what you want.

Check out this fiddle.

#ToBeApplied td {
padding:23px;
font-weight:bold
}

Here is the snippet.

#ToBeApplied td {  padding: 23px;  font-weight: bold}
<table class="pure-table fullWidth" id="ToBeApplied">  <tbody>    <tr class="pure-table-odd">      <td>        <label>Bank</label>      </td>      <td>        <label>Japha Bank</label>      </td>    </tr>  </tbody></table><table class="pure-table fullWidth" id="NotToBeApplied">  <tbody>    <tr class="pure-table-odd">      <td>        <label>Bank</label>      </td>      <td>        <label>Japha Bank</label>      </td>    </tr>  </tbody></table>

Selecting a specific table cell using CSS

Perhaps this will help shed some light on what's happening:

require 'nokogiri'
doc = Nokogiri::HTML('<table><tr><td>foo</td><td>bar</td></tr></table>')

at returns the first matching Node. In this case it's the <tr>. Using text returns all the text inside it concatenated together:

doc.at('tr').to_html # => "<tr>\n<td>foo</td>\n<td>bar</td>\n</tr>"
doc.at('tr').text # => "foobar"

Using search returns a NodeSet, which is most easily thought of as an Array. In this case it'll return two elements, one for each <tr><td> pair:

doc.search('tr td').size # => 2

text will return the text for all Nodes in the NodeSet, concatenating the strings again:

doc.search('tr td').to_html # => "<td>foo</td>\n<td>bar</td>"
doc.search('tr td').text # => "foobar"

However, by iterating over each Node in the NodeSet we can see the individual text:

doc.search('tr td').map(&:text) # => ["foo", "bar"]

An alternate, but slightly slower, way to do the same thing is to find the <tr> Node first, then searching inside it for the individual <td> nodes:

doc.at('tr').search('td').size # => 2
doc.at('tr').search('td').to_html # => "<td>foo</td>\n<td>bar</td>"
doc.at('tr').search('td').text # => "foobar"

Again, using map we can iterate over them and get the text without concatenation:

doc.at('tr').search('td').map(&:text) # => ["foo", "bar"]

Here's the difference in speed using a single vs. separate selectors to descend and select the <td> nodes:

require 'fruity'
require 'nokogiri'

doc = Nokogiri::HTML('<table><tr><td>foo</td><td>bar</td></tr></table>')

compare do
single_selector { doc.search('tr td').map(&:text) }
separate_selectors { doc.at('tr').search('td').map(&:text) }
end
# >> Running each test 32 times. Test will take about 1 second.
# >> single_selector is faster than separate_selectors by 2x ± 0.1

The difference is due to a single round-trip call to libXML2 for tr td vs. two for doc.at('tr').search('td').

Unfortunately, sometimes we're forced into using the longer, slower form, if we need to use conditional logic or access multiple disparate types of child nodes in the order they're presented in the markup.

Select tr elements to style only for specific table

You really should try to add an class to the table to use it for a specific table styling. then you can reuse this class for other tables in the future. The other approaches should only be used if this is not possible. An identifier can only be used once on the page. So when another table needs the same styling later you need to change it. And based on position is even worse because if there is a table added on the page in the future the styling will shift to another table and mess it up.

Based on table id would look like this

#yourtableid tr:nth-child(even) td {
background: #F1F1F1;
}
#yourtableid tr:nth-child(odd) td {
background: #FEFEFE;
}

Based on table class would look like this

table.yourtableclass tr:nth-child(even) {background: #F1F1F1}
table.yourtableclass tr:nth-child(odd) {background: #FEFEFE}

If it is the first table on the page it would be something like this.

table:first-of-type tr:nth-child(even) td {
background: #F1F1F1;
}
table:first-of-type tr:nth-child(odd) td {
background: #FEFEFE;
}


Related Topics



Leave a reply



Submit