We Keep Coding

How to make table responsive and attractive using bootstrap?

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;}

Changing CSS Style for First Column in Table when Hovering over Second Column

I've tried so many things to get this work.
Here's the table and CSS code:
https://codepen.io/anon/pen/JNereG
You can see, if you hover in the first column, the dotted border is gone. Go over to the second column, it remains.
Learned some things here which talked about #a:hover + #b #a:hover ~ #b #a:hover #b
Generally speaking I'm targeting these elements with like table.spectable td for all the TD Rows and Columns, so table.spectable tr:hover td worked great on hover for these elements.
The issue is right here:
table.spectable td:nth-child(1) {
border-right: 1px dotted #C1C3D1;
}
A dotted line between the columns which is happening on the first column.
Easy to write up a CSS to remove this on hover within the first column :
table.spectable td:hover:nth-child(1) {
border-right: none;
}
But if I'm hovering in the second column.. I also want the same thing to occur.
What have I tried? Too many things to list, embarrassingly to say.
As mentioned above,
table.spectable td.nth-child(1):hover ~ table.spectable td.nth-child(2) {
border-right: none;
}
was a no go. Same with the + variant of that, and the one omitting anything in between. No luck. I've tried a bunch of other random things, some of them are still in the CodePen.
Even jQuery solutions I can't get to work. Example of one:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("table.spectable td.nth-child(2)").hover(function(){
$("table.spectable td.nth-child(1)").css('border-right','none')
})
</script>
I'm sure this is probably really simple.. but how in the world do I get rid of the border in the first column when hovering over the second?

Check this out https://codepen.io/inijr/pen/EmOEjP?editors=1111
for($i = 1; $i < $('.td-cell').length; $i+=2){
$($('.td-cell')[$i]).hover(
function(){
$('.td-cell').css('border-right','none');
},
function(){
$('.td-cell').css('border-right','1px dotted #C1C3D1');
});
}
for($i = 1; $i < $('.td-cell-alt').length; $i+=2){
$($('.td-cell-alt')[$i]).hover(
function(){
$('.td-cell-alt').css('border-right','none');
},
function(){
$('.td-cell-alt').css('border-right','1px dotted #C1C3D1');
});
}

The CSS selector already exists in your code.
Add border-right: none; to the following tags:
table.spectable tr:hover td {
background:#7F8C9A;
color:#000000;
border-top: 2px solid #22262e;
border-bottom: 2px solid #22262e;
border-right: none;
}
table.spectable tr:nth-child(odd):hover td {
background: #34495E;
color: #fff;
border-right: none;
}

Highlight table row with different colors depending on their column

Is there a way using CSS3 or javascript to highlight a table row containing 2 elements where each table element is highlighted a different background color upon hovering over that row?
So for example you have a table row with two values like
1.45 | 2.56
and the table element containing 1.45 would have a blue background and element containing 2.56 would be red.
At the moment I have it so it changes the background color for the entire row like so:
.graph-table tbody > tr:hover {
background-color: #6ab1b0;
}

Use :nth-child selector, like this:
td {
padding: 15px;
}
tr:hover td {
background-color: red;
color: white;
cursor:pointer;
}
tr:hover td:nth-child(1) {
background-color: blue;
}
<table>
<tr>
<td>2.00</td>
<td>3.45</td>
</tr>
</table>

you can use :nth-of-type() like so:
tr td:nth-of-type(1):hover{
background: red;
}
tr td:nth-of-type(2):hover{
background: blue;
}
EXAMPLE 1
And by targeting the td as a descendant of tr you can assure that it works on multiple rows:
EXAMPLE 2

:nth-child(even){background-color: #ffd800;}
or
:nth-child(odd)

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}

What is an efficient way to set CSS class for each cell in a given table row?

I have a problem setting the CSS class for each cell in a given table row. Initially I thought setting the parent row CSS would affect the style properties of cells,
but that doesn't work. Instead I have to loop through all the cells in a given row to updated the CSS class.
However this is not efficient. And it took a lot of time. Consider my situation: I have around 230 rows in which each row has 23 cells (totally 5290 cells).
Note: I don't use any frameworks. so please can you suggest an approach in native JS?
UPDATE :
its working fine using the Paolo's recommendation..
Initially my custom css class is been like this
.Grid_RowItalicsBold { PADDING-RIGHT: 5px; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; OVERFLOW: hidden; COLOR: Black; LINE-HEIGHT: 15pt; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Sans-Serif; WHITE-SPACE: nowrap; BACKGROUND-COLOR: yellow; TEXT-DECORATION: none }
And i changed this to
tr.Grid_RowItalicsBold td{ PADDING-RIGHT: 5px; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; OVERFLOW: hidden; COLOR: Black; LINE-HEIGHT: 15pt; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Sans-Serif; WHITE-SPACE: nowrap; BACKGROUND-COLOR: yellow; TEXT-DECORATION: none }
And i assigned this class to my specific rows using javascript. :)

Why can't you set the class of the row and adjust your css accordingly?
<tr class="myclass">
<td>...</td>
<td>...</td>
</tr>
Then in CSS:
tr.myclass td {
...
}
In either case, assuming the table has an id of "mytable" you could give all the table rows the class you want like so:
var rows = document.getElementById('mytable').getElementsByTagName('tr');
for(var x = 0; x < rows.length; x++) {
rows[x].className = rows[x].className + " myclass";
}
If you're doing this to the whole table, though, you might as well just give a class to the table tag itself then do:
table.myclass tr td {
...
}

#kris, the classes used in cells are common for entire cells.. i need to update only the selective rows.. so i cant just update that...
It still seems like you should be using CSS selectors to do what you want. Maybe something like this:
#mytable td {
// regular td style
}
#mytable .special td {
// special cell style
}
<table id="mytable">
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="special">
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>

Initially I thought setting the parent
row CSS would affect the style
properties of cells, but that doesn't
work.
I think that if you set some of your cell's properties to "inherit" they will inherit those properties from the table row. Have you tried that?