I am trying to add zebra strips to the table by using following code but its not working. When used inspect element the border of the table is not working. And also cannot see the zebra effect on the table.
<body>
<div class="table_style">
<table border="true">
<tr>
<th>Student Name</th>
<th>Marks in Science</th>
</tr>
<tr>
<td>Janet</td>
<td>85.00</td>
</tr>
<tr>
<td>David</td>
<td>92.00</td>
</tr>
<tr>
<td>Arthur</td>
<td>79.00</td>
</tr>
<tr>
<td>Bill</td>
<td>82.00</td>
</tr>
</table>
</div>
</body>
.table_style {
width: 500px;
margin: 0px auto;
}
table {
width: 100%;
border-collapse: collapse;
}
table tr td {
width: 50%;
border: 1px solid #D0FSA9;
padding: 5px;
}
table tr th {
border: 1px solid #D0FSA9;
padding: 5px;
}
.zebra {
background-color: #D0FSA9;
}
.zebra1{
background-color: #E0FSA0;
}
$(document).ready(function(){
$("tr:odd").addClass("zebra");
$("tr:even").addClass("zebra1");
});
Try this,
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Plain css will do this.... no Javascript is needed
You can use the nth-child(even) instead of using jQuery.
Also, your hex values are invalid that's why he is not applying the color.
Why are they invalid ? Because they have an S on it.
The only valid characters in a hex color are:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
So, use nth-child(even) and nth-child(odd) and apply valid hex values in the colors.
table tr:nth-child(odd) {
background-color: red;
}
table tr:nth-child(even) {
background-color: blue;
}
table tr:first-child {
background-color: transparent; /*headers*/
}
<div class="table_style">
<table border="true">
<tr>
<th>Student Name</th>
<th>Marks in Science</th>
</tr>
<tr>
<td>Janet</td>
<td>85.00</td>
</tr>
<tr>
<td>David</td>
<td>92.00</td>
</tr>
<tr>
<td>Arthur</td>
<td>79.00</td>
</tr>
<tr>
<td>Bill</td>
<td>82.00</td>
</tr>
</table>
</div>
It will not work because you used 'S' in the rgb.
RGB only range from A TO F and 0 to 9
just change the background color of class zebra and zebra1
.table_style {
width: 500px;
margin: 0px auto;
}
table {
width: 100%;
border-collapse: collapse;
}
table tr td {
width: 50%;
border: 1px solid #D0F3A9;
padding: 5px;
}
table tr th {
border: 1px solid #D0F3A9;
padding: 5px;
}
.zebra {
/*background-color: #D0F3A9;*/
background-color: blue;
}
.zebra1{
/*background-color: #D0ffA9;*/
background-color: green;
}
Related
I have a simple nested table. Three columns - Name, Email,Contact. In the contact column, I have have two contact separated by a . This table gets stacked in the form of one row below the another in the mobile view.
Problem : Since the two contact numbers are separated by a break, in the mobile view it adds a huge space between the column headings. I just want to pick up "contact" heading in mobile(and not touch the numbers) and move it a little to reduce the space in between. Right now, whatever css I apply it moves the contact numbers along with it. Please suggest how can I do this ?
$(function() {
$(".fold-table tr.view").on("click", function() {
$(this).toggleClass("open").next(".fold").toggleClass("open");
});
});
$('.view, table.child').each(function() {
$('.view:even, table.child:even').addClass('odd');
$('.view:odd, table.child:odd').addClass('even');
});
.tableComponent table.parent {
font-family: 'Poppins';
font-size: 12px;
width: 60%;
border: none;
border-collapse: separate;
border-spacing: 0 2px;
}
.tableComponent table thead th {
border-bottom: 0;
border-top: 0;
}
.tableComponent table td,
th {
border-top: 0px;
}
table.fold-table>tbody>tr.view td,
table.fold-table>tbody>tr.view th {
cursor: pointer;
}
table.fold-table>tbody>tr.fold {
display: none;
}
table.fold-table>tbody>tr.fold.open {
display: table-row;
}
.odd {
background-color: #F2F2F2;
}
.even {
background-color: #F8F8F8
}
table.child {
font-family: 'Poppins';
font-size: 12px;
width: 100%;
margin-top: -0.1rem;
border-top: 2px solid #DBDBDB;
}
table.fold-table>tbody>tr.fold.open>td {
padding: 0;
}
#media all and (max-width: 500px) {
.tableComponent table.parent {
width: 90%;
margin-left: 5vw
}
.tableComponent thead {
display: none;
}
.tableComponent tr {
display: flex;
flex-direction: column;
margin-bottom: 5px;
}
.tableComponent td::before {
content: attr(col);
font-weight: bold;
padding-right: 20px;
width: 40vw;
display: inline-block;
}
table.child {
margin-top: -0.5rem;
}
.contactInfo {
display: inline-block;
margin-left: -0.2rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tableComponent">
<table class="table fold-table parent" id="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Contact</th>
</tr>
</thead>
<tbody>
<tr class="view">
<td col="Name">John</td>
<td col="Email">j#g.com</td>
<td col="Contact">
<span class="contactInfo">
35373726<br>
35373726
</span>
</td>
</tr>
<tr class="fold">
<td colspan="3">
<div class="fold-content">
<table class="child">
<tbody>
<tr>
<td col="Name">SUB Data 1</td>
<td col="Email">SUB Data 1</td>
<td col="Contact">SUB Data 1
</td>
</tr>
<tr>
<td col="Name">SUB Data 1</td>
<td col="Email">SUB Data 1</td>
<td col="Contact">SUB Data 1
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
In css, the inline elements doesn't take margins, so vertical alignment can be done like so
#media all and (max-width: 500px){
.tableComponent td::before {
vertical-align: top;
}
}
If you change the col="Contact" td into a flexbox, it will behave the way you want it at that screen size.
[col="Contact"] {
display: flex;
}
I have a simple table with a button below it. This is in the body section of my jsp as below:
<div id="myDivForPrint">
<table class="t1">
<tbody>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
<button onclick="printDiv()">Print</button>
Below is the CSS with #media rule which is supposed to format the table. The CSS is in head section of my jsp:
#media print,screen{
table.t1 {
margin: 1em auto;
border-collapse: collapse;
font-family: Arial, Helvetica, sans-serif;
}
.t1 th, .t1 td {
padding: 4px 8px;
}
.t1 thead th {
background: #4f81bd;
text-transform: lowercase;
text-align: left;
font-size: 15px;
color: #fff;
}
.t1 tr {
border-right: 1px solid #95b3d7;
}
.t1 tbody tr {
border-bottom: 1px solid #95b3d7;
}
.t1 tbody tr:nth-child(odd) {
background: #dbe5f0;
}
.t1 tbody th, .t1 tbody tr:nth-child(even) td {
border-right: 1px solid #95b3d7;
}
.t1 tfoot th {
background: #4f81bd;
text-align: left;
font-weight: normal;
font-size: 10px;
color: #fff;
}
.t1 tr *:nth-child(3), .t1 tr *:nth-child(4) {
text-align: right;
}
}
</style>
Below is the javascript function to print the div containing my table. It is in the body section of my jsp:
<script type="text/javascript">
function printDiv()
{
var divToPrint=document.getElementById("myDivForPrint");
newWin= window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.document.close();
newWin.document.focus();
newWin.print();
newWin.close();
}
</script>
The page comes nicely formatted on screen. However, when I click on the print button and print the page as an xps document, all the CSS formatting is lost and just the content of the table gets printed which looks really bad.
What am I doing wrong ? I am using IE8 and that I can not move to other browser or newer version of IE.
You can use different styles for screen and print media in your style sheet, i.e.
#media screen
{
table.test {
font-family:"Times New Roman",Georgia;
font-size:10px;
// more
}
}
#media print
{
table.test {
font-family:Verdana, Arial;
font-size:10px;
// more
}
}
When you'll print the table only styles defined in print media will be applied.
Click This for more
How do I justify a th's text when its text starts pushing the table making it get bigger that its original size
I'd like to make the table "break a line" (AKA justify) when it can't squeeze the other cell anymore.
Original:
What is happening now (The problem):
How it should be:(instead of increasing width, it increases height, and keep the whole text)
<!DOCTYPE html>
<html>
<head>
<title>My_Littlest_Table_Shop</title>
<style>
table{
width: 200px;
height: 100px;
}
table, th, td{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="header" align="center">idkajsdhfkjhaksdfhkjashfkjaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaksdfjjjjjj</th>
<th class="header" align="center">id</th>
</tr>
</thead>
<tbody>
<tr>
<td class="header" align="center">id</td>
<td class="header" align="center">id</td>
</tr>
</tbody>
</table>
<div>----------------200px--------------></div>
</body>
</html>
These guys should do the trick:
table {
table-layout: fixed;
}
th, td {
/* not sure if you want this
width: 100px; */
word-wrap: break-word;
}
<!DOCTYPE html>
<html>
<head>
<title>My_Littlest_Table_Shop</title>
<style>
table{
width: 200px;
height: 100px;
}
table, th, td{
border: 1px solid black;
}
table {
table-layout: fixed;
}
th, td {
/* not sure if you want this
width: 100px; */
word-wrap: break-word;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="header" align="center">idkajsdhfkjhaksdfhkjashfkjaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaksdfjjjjjj</th>
<th class="header" align="center">id</th>
</tr>
</thead>
<tbody>
<tr>
<td class="header" align="center">id</td>
<td class="header" align="center">id</td>
</tr>
</tbody>
</table>
<div>----------------200px--------------></div>
</body>
</html>
you'll need to alter the css to allow word break and justify the text
table, th, td{
border: 1px solid black;
word-break: break-all;
text-align: justify;
}
Have a look at this fiddle:
http://jsfiddle.net/mLLkvt4m/
Just add the CSS mentioned below:
td, th {
width: 100px;
max-width: 100px;
word-wrap: break-word;
overflow: hidden;
}
I want to have a table, such that if the width of the page decreases the columns of the table should be displayed one below the other.
You can use CSS display properties to alter the way the table behaves. In order to make the table cells sit one on top of the other, you need to create a media query which will set the table and each cell to be display: block at the break point that best suits your needs.
In the example below the table cells will wrap when the screen width shrinks to 500px.
Example
#media (max-width: 500px) {
table {
display: block;
border: solid 1px #f00;
}
table td {
display: block;
border: solid 1px #f00;
}
}
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Explanation
By default a table tag uses display: table and a table cell uses display: table-cell. By changing these properties we can alter the way the table is displayed.
For more information on display properties see this article:
https://developer.mozilla.org/en-US/docs/Web/CSS/display
For more information on media queries see the following article:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Alright if i understand correctly you want something like this:
http://codepen.io/geoffyuen/pen/FCBEg
This Solution wil make your table responsive so it can do what you are trying to do(at leat i think i know what youre trying to do)
Just some example html code
<h1>RWD List to Table</h1>
<table class="rwd-table">
<tr>
<th>Movie Title</th>
<th>Genre</th>
<th>Year</th>
<th>Gross</th>
</tr>
<tr>
<td data-th="Movie Title">Star Wars</td>
<td data-th="Genre">Adventure, Sci-fi</td>
<td data-th="Year">1977</td>
<td data-th="Gross">$460,935,665</td>
</tr>
<tr>
<td data-th="Movie Title">Howard The Duck</td>
<td data-th="Genre">"Comedy"</td>
<td data-th="Year">1986</td>
<td data-th="Gross">$16,295,774</td>
</tr>
<tr>
<td data-th="Movie Title">American Graffiti</td>
<td data-th="Genre">Comedy, Drama</td>
<td data-th="Year">1973</td>
<td data-th="Gross">$115,000,000</td>
</tr>
</table>
Then we have our CSS
#import "compass/css3";
// More practical CSS...
// using mobile first method (IE8,7 requires respond.js polyfill https://github.com/scottjehl/Respond)
$breakpoint-alpha: 480px; // adjust to your needs
.rwd-table {
margin: 1em 0;
min-width: 300px; // adjust to your needs
tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
th {
display: none; // for accessibility, use a visually hidden method here instead! Thanks, reddit!
}
td {
display: block;
&:first-child {
padding-top: .5em;
}
&:last-child {
padding-bottom: .5em;
}
&:before {
content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
font-weight: bold;
// optional stuff to make it look nicer
width: 6.5em; // magic number :( adjust according to your own content
display: inline-block;
// end options
#media (min-width: $breakpoint-alpha) {
display: none;
}
}
}
th, td {
text-align: left;
#media (min-width: $breakpoint-alpha) {
display: table-cell;
padding: .25em .5em;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
}
// presentational styling
#import 'http://fonts.googleapis.com/css?family=Montserrat:300,400,700';
body {
padding: 0 2em;
font-family: Montserrat, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #444;
background: #eee;
}
h1 {
font-weight: normal;
letter-spacing: -1px;
color: #34495E;
}
.rwd-table {
background: #34495E;
color: #fff;
border-radius: .4em;
overflow: hidden;
tr {
border-color: lighten(#34495E, 10%);
}
th, td {
margin: .5em 1em;
#media (min-width: $breakpoint-alpha) {
padding: 1em !important;
}
}
th, td:before {
color: #dd5;
}
}
Hope this helps you
I need to highlight a row in a DataTables.js data table whenever it is inactive. I have some code set up in my Razor to label the <tr> with an id of "Inactive" and in my CSS I have the background color set accordingly. However, I can't get anything but the orignal styling to appear.
CSS
/*
* Table styles
*/
table.pretty {
width: 100%;
clear: both;
}
table.pretty td#Inactive {
padding: 5px;
border: 1px solid #fff;
background-color: #FB9090;
}
table.pretty td,
table.pretty th {
padding: 5px;
border: 1px solid #fff;
}
/* Header cells */
table.pretty thead th {
background: #6699FF; /* #66a9bd; */
color: white;
}
/* Body cells */
table.pretty tbody th {
text-align: left;
background: black; /*#91c5d4; */
color: white;
}
table.pretty tbody td {
background: white; /* #d5eaf0; */
}
table.pretty tbody tr.odd td {
background: #e8eef4; /*#bcd9e1; */
}
/* Footer cells */
table.pretty tfoot th {
background: #b0cc7f;
text-align: left;
}
table.pretty tfoot td {
background: #d7e1c5;
text-align: center;
font-weight: bold;
}
tr#Inactive
{
background-color: #FB9090;
}
HTML (Rendered)
<tr id=Inactive style="vertical-align:top;">
<td style="width:200px;">
Name
</td>
<td>
Fixed
</td>
<td style="width:50px;">
test
who's testing
I am
who's that eh?
me
</td>
<td style="width:50px;">
109161
</td>
<td style="text-align:center">
<img src="/Content/Images/attachment.png" height="20px;" width="20px;"/>
</td>
<td nowrap>
</td>
<td nowrap>
</td>
<td style="text-align:center; max-width: 50px;">
</td>
<td>
<img src="/Content/Images/Pencil-icon.png" alt="edit" height="20px;" width="20px;"/><br />
<img src="/Content/Images/Actions-view-list-text-icon.png" alt="details" height="20px;" width="20px;"/><br />
<img src="/Content/Images/Actions-edit-delete-icon.png" alt="delete" height="20px;" width="20px;"/>
</td>
</tr>
jQuery
$("#thetable").dataTable({
"sPaginationType": "full_numbers",
"iDisplayLength": 100,
"oLanguage": {
"sSearch": "Filter results:"
}
});
If only one row is inactive at a time, I think you're looking for:
tr#Inactive td
{
background-color: #FB9090;
}