Example: I want to style that element in my style.css file
<table>
<thead>...</thead>
<tbody id="something">
<tr class="highlight_on_hover" id="1">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>
Link
The element I want to style.
</td>
</tr>
<tr class="highlight_on_hover" id="2">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>
Link
The element I want to style.
</td>
</tr>
</tbody>
<table>
I want to style that element in my style.css file using css selectors
Based on your example structure
.highlight_on_hover td a:nth-child(2)
would get it done.
.highlight_on_hover td a:nth-child(2) {
background: lightblue;
}
<table>
<tbody id="something">
<tr class="highlight_on_hover" id="1">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>
Link
The element I want to style.
</td>
</tr>
<tr class="highlight_on_hover" id="2">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>
Link
The element I want to style.
</td>
</tr>
</tbody>
<table>
You can style the particular element by defining the class name or id to element.
<tr class="highlight_on_hover" id="1">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>
<a href="#" >Link</a>
The element I want to style.
</td>
</tr>
style.css
.link {
color: blue;
text-decoration: underline;
}
if you want to style all <td> tag , add css
table td{ color:red; font-weight:bolder;}
this css will style all your data in your table
or if you want to style a spesific <td> element , try this
<table>
<tbody id="something">
<tr class="highlight_on_hover" id="1">
<td> <span style="color:red;"> Data 1 </span></td>
<td>Data 2</td>
<td>Data 3</td>
<td>
Link
The element I want to style.
</td>
</tbody> </table>
use <span> element to style a spesific element
I hope this will help you
Related
Is there an HTML attribute available equivalent to the CSS property border-collapse: collapse;?
I am trying to achieve the same 1px border with HTML only, and not using css.
table{
border-collapse: collapse;
}
<table border="1px" cellpadding="3">
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>
You could try cellspacing.
<table border="1px" cellspacing="0" cellpadding="3">
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>
Note: cellspacing doesn't overlap borders of adjacent cells, which CSS property does.
You can use cellspacing or cellpadding but it's deprecated in HTML5
i don't understand why you want to stop using CSS because that is what css do
you can use boostrap the css is included inside.
for more info go to w3chools
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
I have a table that has 2 header columns and 4 columns of links. Example code below.
table{
border: 1px solid black;
table-layout: fixed;
width:100%
}
th, td{
border: 1px solid black;
overflow: hidden;
}
td {
width:25%;
}
<table class="fixed-width">
<tr>
<th colspan=2>header 1</th>
<th colspan=2>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
<td>link 3</td>
<td>link 4</td>
</tr>
</table>
https://jsfiddle.net/pse6thr8/21/
I would like the table to look something like this when a mobile accesses it.
New Table
There are 2 different approaches to do that...
Using Bootstrap columns or
Collapse to Tabs or accordion on smaller view
First check how bootstrap columns will work,
first of all, add Bootstrap.min.css file to your like this,
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
Check this fiddle
and then your HTML will be like this,
<div class="col-sm-6">
<table class="fixed-width">
<tr>
<th colspan=2>header 1</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
</div>
<div class="col-sm-6">
<table class="fixed-width">
<tr>
<th colspan=2>header 234567895678657</th>
</tr>
<tr>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>link 3</td>
<td>link 4</td>
</tr>
</table>
</div>
and add this css as,
.col-sm-6{
padding:0px
}
Collapse to Tabs or accordion on smaller view
Check this codepen by csstricks
You can use the media query also please try this
#media (min-width: 769px) and (max-width: 979px) {
/*
Styles for display width
between 769 and 979 pixels
*/
}
#media (max-width: 768px) {
/*
Styles for display width
equal to 768 pixels and thinner
*/
}
#media (min-width: 1200px) {
/*
Styles for display width
equal to 1200 pixels and wider
*/
}
In HTML table rows cannot separate from each other like the way you need them to.
First of all you need to separate your left and right table. So that when you write the correct css, the one on the right would go down below of the first table.
After separating them, write width specific css for the device.
Like this;
table {
border: 1px solid black;
table-layout: fixed;
width: 50%;
float:left;
}
th,
td {
border: 1px solid black;
overflow: hidden;
}
td {
width: 25%;
}
#media (max-width:500px){
table{width:100%}
}
<table class="fixed-width" style="border-right:none;">
<tbody>
<tr>
<th colspan="2">header 1</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</tbody>
</table>
<table>
<tr>
<th colspan="2">header 234567895678657</th>
</tr>
<tr>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>link 3</td>
<td>link 4</td>
</tr>
</table>
In addtion to other's answer,there are multiple ways you can show a table in mobile/responsive view .You can have a look here responsive tables.
I need to set hover of 'a' element that is a child of 'tr', which is picked by nth-child(even) selector.
Basically I've got the normal table with multiple rows, and inside every table cell there is an 'a' link, that I want to highlight while hovered, but only in the even rows.
My CSS code:
.table-striped tr:nth-child(even) td a:hover {
color: #3c3c3c;
}
And it's not working.
How can I solve this?
.table-striped tr:nth-child(even) td a:hover {
color: Red;
}
<table class="table-striped">
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
</table>
The css you are using is working perfectly:
.table-striped tr:nth-child(even) td a:hover {
color: #3c3c3c;
color:red;/*for dislay i have use this red color;*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<tr>
<td>link 1</td>
<td>link 2</td>
<td>link 3</td>
</tr>
<tr>
<td>link 1</td>
<td>link 2</td>
<td>link 3</td>
</tr>
<tr>
<td>link 1</td>
<td>link 2</td>
<td>link 3</td>
</tr>
<tr>
<td>link 1</td>
<td>link 2</td>
<td>link 3</td>
</tr>
<tr>
<td>link 1</td>
<td>link 2</td>
<td>link 3</td>
</tr>
</table>
Try this one:
.table-striped tr:nth-child(even):hover td a {
color: #3c3c3c;
}
Whenever I am trying to make my table scroll with overflow and display block css. Table width always getting reduced and leaves empty space. Why this is happening? What I am doing wrong here. My table is inside a div.
HTML:
<div id="window">
<div id="tableContainer">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</div>
</div>
css:
div{
width:500px;
height:500px;
display:block;
}
table
{
width:180px;
height:100px;
display:block;
overflow:auto;
border:1px solid black;
}
table td{
border:1px solid black;}
}
Fiddle:
http://jsfiddle.net/KrP7v/117/
HTML:
<div id="window">
<div id="tableContainer">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</div>
CSS
#tableContainer{
float:left;
height:100px;
display:block;
overflow-y: scroll;
float:left
}
table
{
height:100px;
display:block;
float:left;
}
table td{
border:1px solid black;}
}
http://jsfiddle.net/4erveak/KrP7v/118/
Here is fix for your bug but at end add a div and get them style clear:both
how to align the second column of data cells evenly when first column contains data and empty cells in a html table?
For example, how to align the following data below into a html table.
Column1 Column2
===================
data 1 data 2
data 3
data 4
data 5
blank line
data 1 data 2
data 3
data 4
data 5`
Like so? Demo: http://jsfiddle.net/a2ckX/
<table cellpadding="5" cellspacing="0">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td style="vertical-align: top">data 1</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
</tr>
<tr>
<td>Data 5</td>
</tr>
<tr>
<td>Data 6</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">Spacer</td>
</tr>
<tr>
<td style="vertical-align: top">data 1</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
</tr>
<tr>
<td>Data 5</td>
</tr>
<tr>
<td>Data 6</td>
</tr>
</table>
</td>
</tr>
</table>