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
Set Width of Ng-Multiselect-Dropdown
Twitter Bootstrap Modal Opening/Closing Causes Fixed Header to Jump
How to Use '&' and a Tag on the Same Selector
CSS Perspective Not Working in Firefox
Rotating 90 Degrees in CSS in IE8 and Lower
CSS Selector for Multiple Different Class Name Combinations
Preventing an Image from Being Draggable or Selectable Without Using Js
How to Stretch The Background Image to Fill a Div
Height Style Property Doesn't Work in Div Elements
Sass Throws an Error for Bem Syntax
CSS Non-Standard "Zoom" Property
Css: Scale Background Image Down If Larger Than Window, Keep at 100% Otherwise
How to Avoid Double Border from the Multiple <Li>
How to Make a Svg Clippath with a <Path> Responsive
How to Add a Search Box with Icon to The Navbar in Bootstrap 3