How to make table responsive and attractive using bootstrap? - javascript

I have to show table in a responsive and attractive manner using bootstrap. Currently, it is looking like a simple table and I want it to be eye catching using bootstrap.
I have used simple html and nothing else and want to make it look attractive.
here is my code-
var table = $("<table>");
table.append($("<tr><th>column1</th><th>column2</th></tr>"));
for (var i = 0; i < 2; i++) {
var row = $('<tr ><td>' + 'data' + '</td><td>' + 'data' + '</td>
</tr>');
table.append(row);
}
$("#table").html(table);
div content-
<div id="table">
</div>
css-
#table {
margin-top: 20px;
border-collapse: collapse;
width: 500px;
}
#table th {
border: 1px solid black;
text-align: left;
}
I am using simple css and html and want to use bootstrap to make my table look attractive and responsive.

If you are using Bootstrap, there is no need to create your own responsive class, because there is already a responsive class available for table elements:
<table class="table responsive">
...
</table>

If you are using Bootstrap use
<table class="table-responsive">
</table>
or other wise use css
#table{
width:100%;
}

You can try this:
table {
border-collapse: collapse;
width: 100%;
}
table th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
table tr:hover {background-color:#f5f5f5;}

Related

When using border-collapse, how to compute border-bottom-width in JavaScript?

When using table { border-collapse: collapse; } combined with th { border-bottom: 11px solid black }, it seems impossible to compute the border-bottom-width in JavaScript.
window.getComputedStyle(th).getPropertyValue('border-bottom-width') does not help at all. Just see what this fiddle logs to the console in different browsers...
Chrome: 11px
IE11: 5.5px
Firefox: 6px
If I remove border-collapse all browsers return 11px, as I would expect.
Is there a more reliable way to get the precise border-width when using border-collapse? OR is there a way to get the height (including borders) of either the thead, tr or th without running into the same inconsistencies between browsers?
Interesting! Seems like it's a plain inconsistency between browsers, don't think there's a simple solution to this. Anyways, here's a hacky solution/workaround:
var th = document.getElementById('th');
var table = document.getElementById('table');
var style = window.getComputedStyle(th);
table.style.borderCollapse = 'separate';
var borderHeight = style.getPropertyValue('border-bottom-width');
table.style.borderCollapse = 'collapse';
console.log(borderHeight);
table {
border-collapse: collapse;
}
th {
border-bottom: 11px solid red;
}
<table id="table">
<tr>
<th id="th">TH</th>
</tr>
</table>
Tested in Chrome & Firefox, both returned 11px.
EDIT: Based on #Eric N's answer, you might get lucky adding display: block to the ths. That would break the table layout then and you would need to work around that. Example for that:
var th = document.getElementById('th');
var style = window.getComputedStyle(th);
var borderHeight = style.getPropertyValue('border-bottom-width');
console.log(borderHeight);
table {
border-collapse: collapse;
}
th {
display: block;
float: left;
border-bottom: 11px solid red;
}
<table id="table">
<tr>
<th id="th">TH</th>
<th>TH</th>
<th>TH</th>
</tr>
</table>
Based on this post, it appears having a display:table-cell (inherit for your cells) yield different height/border-width results in different browsers. They suggest changing the display to block on your th to force the browser to calculate that value as you would expect.

Overriding a style sheet with jquery's addClass method

NOTE: adding $.tablesorter.defaults.widgets = ['zebra']; fixed the issue.
I have a simple table of records that was styled to alternate row colors:
inv_style.css
.tr_evn {background-color:#FFFFFF;}
.tr_odd {background-color:#F8F8F8;}
home.html
$(document).ready(function(){
$("#tbl_inv > tbody > tr:odd").addClass("tr_odd");
$("#tbl_inv > tbody > tr:even").addClass("tr_evn");
});
<table id="tbl_inv">...</table>
The table was then made sortable using tablesorter
$(document).ready(function(){
$("#tbl_inv").tablesorter();
$("#tbl_inv > tbody > tr:odd").addClass("tr_odd");
$("#tbl_inv > tbody > tr:even").addClass("tr_evn");
});
<table id="tbl_inv" class="tablesorter">...</table>
Up to this point I was still getting alternate row coloring that sorting would mess up and which I was about to fix. I first needed to add a custom stylesheet for the tablesorter table (for uniformity):
style_tablesorter.css
table.tablesorter{
font-family: Arial, sans-serif;
background-color: #BBBBBB;
margin:10px 0pt 15px;
font-size: 10px;
text-align: left;
padding:0px;
}
...
This style overrides the previous color alternation. All's I want to know is where to place the jquery addClass call's above so that they override this stylesheet?
Solution Attempts
I tried moving the addClass calls to
$(document).load()
$(window).ready()
$(window).load()
which had no effect.
I then tried manipulating document.styleSheets (Changing CSS Values with Javascript) which did work to simply change all the background-color's to the same color
var ss = document.styleSheets[x]; //x: index of style_tablesorter.css
var rules = ss[document.all ? 'rules' : 'cssRules'];
for(var i=0; i<rules.length; i++) {
rules[i].style.setProperty("background-color","white");
}
I then tried, for the hell of it, using a the jquery style selector from my calls above ("#tbl_inv > tbody > tr:odd")
for(var i=0; i<rules.length; i++) {
rules[i].addRule("#tbl_inv > tbody > tr:odd", "background-color: white");
}
Why are you not using even and odd to style the rows that way when the table is sorted it does not mess up the colors?
tbody tr:nth-child(even) td{
background-color: #aaa;
}
tbody tr:nth-child(odd) td{
background-color: #cfc;
}
table { border-collapse: collapse}
<table>
<tbody>
<tr><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td></tr>
<tr><td>4</td><td>4</td></tr>
<tr><td>5</td><td>5</td></tr>
</tbody>
</table>
You could un-complicate the whole thing using pseudo-classes.
tr:nth-child(even) { background: #fff; }
tr:nth-child(odd) { background: #f8f8f8; }

animate the table rows to slide out or fade in?

I stumbled upon this plugin
https://jquery-datatables-row-grouping.googlecode.com/svn/trunk/customization.html
the problem is, everything is in <tr>s and I fear you cannot animate them?
Is there really no way? CSS or javascript wise.
e.g. I want to animate a tables tr elements.
Maybe one solution could be like that :
var animate = function(evt) {
//we go to the 'tr' tag
$el = $(evt.currentTarget).parent().parent();
//we hide the 'td's tag
$el.find('td').hide(333 , function(){
// we reduce the height of 'tr' tag
$el.animate({height : 0} , 777)
});
}
$('button').click(animate);
table {
border: solid 1px #AAA;
padding: 3px;
border-collapse: separate;
}
td {
height: 50px;
margin : 3px;
min-width : 50px;
border: solid 1px orange;
}
tr {
height : 55px;
padding : 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>a</td><td>b</td><td><button>hide</button></td>
</tr>
<tr>
<td>a</td><td>b</td><td><button>hide</button></td>
</tr>
<tr>
<td>a</td><td>b</td><td><button>hide</button></td>
</tr>
</table>

Overlapping conditions for CSS jQuery Coloring of a table

I think that I've jFiddled myself into a corner here. I've got a customer project where I'm tracking system migration status from one domain to another. My tool I've created has a web page utility that people can use to track a migration. I'm currently a bit confused, trying to identify where I've made a mistake in my css.
My tool will export an HTML file which will have a few conditions:
If the migration status equals Needs Attention, color the row red, overlapping any other conditions
If the migration status equals Migrated, color the row green, overlapping any other conditions
If the migration status equals ReadyForMigration, color the row yellow
So, for some reason, it seems like my jquery $(this) selector doesn't work on the first cell in a row, but will work on other cells in the row.
Any idea why only some of these cells are receiving their coloration?
Fiddler link : http://jsfiddle.net/6zjggL9j/4/
jquery
$('tbody tr td:not(":first")').each(
function() {
var cell = $(this).text();
if (cell == 'Not Online') {
$(this).closest('tr').addClass('NotOnline')
}
else if (cell == 'Migrated') {
$(this).addClass('good');
$(this).closest('tr').addClass('good')
}
else if (cell == 'ReadyForMigration') {
$(this).addClass('Available');
$(this).closest('tr').addClass('Available')
}
else if (cell == 'Available') {
$(this).addClass('Available');
$(this).closest('tr').addClass('Available')
}
});
css
table {
width: 20em;
}
th {
border-bottom: 2px solid #000;
padding: 0.5em 2em 0.1em 0;
font-size: 1.2em;
}
td {
border-bottom: 2px solid #ccc;
padding: 0.5em 0 0.1em 0;
}
.vGood {
background-color: #0f0;
}
.Online {
background-color: #0f0;
}
.good {
background-color: #0c0;
}
.avg {
background-color: #060;
}
.poor {
background-color: #c00;
}
.vPoor {
background-color: #f00;
}
.Migrated{}
.Online{
background-color: #fd0;
}
.NotOnline {
background-color: #a44
}
.Available{
background-color: #dca
}
}
html
<table id="my_table">
<colgroup><col/><col/><col/><col/><col/><col/><col/></colgroup>
<thead>
<tr><th>MigrationStatus</th><th>User</th><th>ComputerName</th><th>Location</th><th>Ipv4</th><th>Domain</th><th>Online</th></tr>
</thead>
<tr><td>ReadyForMigration</td><td>NA</td><td>5101TEST-LI</td><td>##</td><td>10.24.130.74</td><td>Source</td><td>Available</td></tr>
<tr><td>Needs Attention</td><td>NA</td><td>ABBON-L2</td><td>##</td><td>??</td><td>Access Denied</td><td>Not Online</td></tr>
<tr><td>Needs Attention</td><td>NA</td><td>ABBON-L7</td><td>##</td><td>??</td><td>Access Denied</td><td>Not Online</td></tr>
<tr><td>Needs Attention</td><td>NA</td><td>ACCTGTEMP-L</td><td>##</td><td>??</td><td>Access Denied</td><td>Not Online</td></tr>
<tr><td>Migrated</td><td>NA</td><td>ADAMSL-D</td><td>##</td><td>??</td><td>Corp</td><td>Not Online</td></tr>
<tr><td>Migrated</td><td>NA</td><td>AGRUSSA-LI</td><td>##</td><td>??</td><td>Corp</td><td>Online</td></tr>
<tr><td>ReadyForMigration</td><td>NA</td><td>HamsterMan</td><td>##</td><td>??</td><td>Source</td><td> Online</td></tr>
</table>
If this is anything like the last problem I had, I made a silly mistake and you'll see the cause in moments. Thanks in advance
Yea you're trying to target all the tds, but it is only necessary to target the tr
http://jsfiddle.net/6zjggL9j/5/
Changed the code
else if (cell == 'Migrated') {
$(this).closest('tr').addClass('good')
}
to remove the td class add. Did this for all cases.
Edit yes I overlooked the removing class thing. You should remove all other classes and then add the class you want it to be. That is going to be the best practice..

Styling tables using CSS

I have a problem with styling tables using CSS.
So I have a table in my HTML file:
<table class="altrowstable" id="alternatecolor">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
<td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
<td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>
Here is my JavaScript file:
function altRows(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
}
window.onload=function(){
altRows('alternatecolor');
}
And here is my CSS file:
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.oddrowcolor{
background-color:#d4e3e5;
}
table.evenrowcolor{
background-color:#c3dde0;
}
The problem is that it is not changing color neither odd rows nor even odd.
What am I doing wrong?
Thanks.
I'll provide you a CSS solution for this:
table.class_name tr:nth-child(odd) {
/* Styles */
}
table.class_name tr:nth-child(even) {
/* Styles */
}
That's all you need, although it’s not supported in IE 8 and earlier.
Demo
For your table headers, you can simply use a different selector to over ride the background styles like
table.altrowstable tr th {
background: #fff;
}
Demo 2
I did check your code and found a little correction iin the css is needed to get the expected solution. There should be an empty space between the table and row classname.
table .oddrowcolor{
background-color:#d4e3e5;
}
table .evenrowcolor{
background-color:#c3dde0;
}
I like to provide solutions that dont tinker or modify the original source much.
Your HTML is fine, JScript is fine(very fine). Good to see that you use the .classname so that is is cross brwoser compatible.So all i did is change the classes for the CSS
YOUR CODE
table.oddrowcolor {
background-color:#d4e3e5;
}
table.evenrowcolor {
background-color:#c3dde0;
}
MY CHANGE
tr.oddrowcolor {
background-color:#d4e3e5;
}
tr.evenrowcolor {
background-color:#c3dde0;
}
WORKING FIDDLE
total change from your code to mine. 8 characters. Simple ain't it?
You have a problem within your CSS. You are setting the class for table, while as it should be for td.
You also need to modify your below js as style can be applied to td and not to tr
var rows = table.getElementsByTagName("td");
Here is the problem in your CSS
table.oddrowcolor{
background-color:#d4e3e5;
}
table.evenrowcolor{
background-color:#c3dde0;
}
You should be using this instead
table td.oddrowcolor{
background-color:#d4e3e5;
}
table td.evenrowcolor{
background-color:#c3dde0;
}
jsFiddle
Try this one ...see the Demo
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Categories