I am trying to remove the padding from the cells inside my table. I have set it to not have padding in the relevant CSS selectors but not a success.
As you can see, there is padding on all of these cells.
I would like there to not be. I have tried various different padding settings and changing the vertical alignment makes no difference other than to move the text, the padding just goes from all at the bottom to spread between bottom and top.
Below is the code:
'use strict'
let table = document.getElementById("mainTable")
let rows = table.querySelectorAll("tbody tr")
let columns = table.querySelectorAll("#weeks th")
for (let row of rows) {
for (let o = 0; o<columns.length-1; o++) {
let cell = document.createElement("td")
cell.innerHTML=' '
cell.addEventListener("click", function() {
if (cell.getElementsByTagName("input")[0]) { return } //If cell currently has an input box
//
let oldValue = ""
if (cell.innerHTML !== " ") { //if cell has a saved value
oldValue = cell.innerHTML
}
cell.innerHTML = '<input type="text" class="cellInputs">'
//update input box with old value and focus it
cell.getElementsByTagName("input")[0].focus()
cell.getElementsByTagName("input")[0].value = oldValue
cell.getElementsByTagName("input")[0].addEventListener("keypress", function(e) {
if (e.keyCode === 13) {
cell.innerHTML=cell.getElementsByTagName("input")[0].value
e.preventDefault()
return true
}
})
cell.getElementsByTagName("input")[0].addEventListener("input", function(e) {
console.log(e)
let cellValue = cell.getElementsByTagName("input")[0].value
if (e.data === "." && (cellValue.split('.').length-1 > 1 || cellValue === ".")) {
console.log("stop")
cell.getElementsByTagName("input")[0].value = (cellValue).substring(0, cellValue.length - e.data.length)
}
if (isNaN(e.data) && e.data !==".") {
console.log("Stop")
cell.getElementsByTagName("input")[0].value = (cellValue).substring(0, cellValue.length - e.data.length)
}
//store value inputted into the actual cell
})
cell.getElementsByTagName("input")[0].addEventListener("paste", function(e) {
// clipboardData = e.clipboardData || window.clipboardData;
// pastedData = clipboardData.getData('Text');
let cellValue = cell.getElementsByTagName("input")[0].value
if (cellValue !== "") {
e.preventDefault()
return false
}
if (e.clipboardData.getData('text') === "." && (cellValue.split('.').length-1 > 1 || cellValue === ".")) {
e.preventDefault()
return false
}
if (isNaN(e.clipboardData.getData('text')) && e.clipboardData.getData('text') !==".") {
e.preventDefault()
return false
}
//store value inputted into the actual cell
})
cell.getElementsByTagName("input")[0].addEventListener("focusout", function() {
console.log(document.activeElement)
cell.innerHTML=cell.getElementsByTagName("input")[0].value
})
})
row.appendChild(cell)
}
}
*{
padding: 0;
margin: 0;
font-family: "Trebuchet MS", Times, serif;
box-sizing:border-box;
}
html{
background-color: #35454E;
overflow: hidden;
}
html *{
font-family: "Work Sans", Arial, sans-serif !important;
color: white !important;
}
table{
border-collapse: collapse;
border-spacing: 0px;
color:#35454E;
height:100%;
width:100%;
}
table, th{
border: 2px solid white;
padding:0;
}
th{
vertical-align:top;
font-size: 2.5vw;
}
td{
vertical-align:top;
box-sizing:border-box;
position: relative;
border: 2px solid white;
padding:0;
text-align: center;
font-size: 2.5vw;
padding:0;
}
.cellInputs{
position: absolute;
width:100%;
height:100%;
display: block;
top:0;
left:0;
border:none;
text-align: center;
background-color: #35454E;
word-wrap: break-word;
font-size: 2.5vw;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="MMS.css">
<title>Money Management</title>
</head>
<body>
<table id="mainTable">
<thead>
<tr>
<th>2019</th>
<th colspan="5">January</th>
</tr>
<tr id="weeks">
<th> </th>
<th>31/12/2018</th>
<th>07/01/2019</th>
<th>14/01/2019</th>
<th>21/01/2019</th>
<th>28/01/2019</th>
</tr>
</thead>
<tbody>
<tr>
<th>Balance</th>
</tr>
<tr>
<th>Pay</th>
</tr>
<tr>
<th> </th>
</tr>
<tr>
<th>Rent</th>
</tr>
<tr>
<th>Food</th>
</tr>
<tr>
<th> </th>
</tr>
<tr>
<th>Total</th>
</tr>
</tbody>
</table>
</body>
<script src="MMS.js"></script>
</html>
Remove height:100% from table .
Related
I have a simple table that also has a td that is offset and acts as a toggle. It switches between 3 states and is working fine in Chrome. Can anyone help me and explain why it does not currently work in Safari, I have not tested this in other browsers yet, but would like solution to work in other browsers too.
Pic and code attached.
Thank you for any help and solutions.
M.
highlight {
background-color: #86C440;
color: white;
}
th {
font-size: 30px;
}
tr {
text-align: left;
}
td {
font-size: 20px;
background-color: #d4d6d3;
cursor: pointer;
}
.center {
margin-left: auto;
margin-right: auto;
}
tr {
position:relative;
transform:scale(1,1);
}
td.last{
position:fixed;
border: 5px solid #d4d6d3;
background-color: #4eafef;
left: -46px;
top: -46px;
height: 7px;
width: 7px;
line-height: 7px;
cursor: pointer;
}
<html>
<body>
<div id="switch">1</div>
<br><br><br><br><br><br><br><br>
<style>
table {border-collapse: collapse; border: 5px solid white; padding: 5px;}
table td {text-align: center; color: black; border: 5px solid white; padding: 10px; height: 66px; width: 66px;}
</style>
<table class="center">
<tr>
<td>1</td>
<td>2</td>
<td id="toggle" class="last" onclick="toggle1()"></td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
<script>
function toggle1() {
var key = document.getElementById("switch").innerHTML;
if (key == 1) {
document.getElementById("toggle").style.backgroundColor = "white";
document.getElementById("toggle").style.backgroundImage = "url('')";
document.getElementById("toggle").style.borderStyle = "solid";
document.getElementById("toggle").style.borderColor = "#d4d6d3";
document.getElementById("toggle").style.borderWidth = "5px";
document.getElementById("switch").innerHTML = 2;
//console.log("toggle clicked 1st time!");
} else if (key == 2) {
document.getElementById("toggle").style.backgroundColor = "#a370f0";
document.getElementById("toggle").style.backgroundImage = "url('')";
document.getElementById("toggle").style.borderStyle = "solid";
document.getElementById("toggle").style.borderColor = "#d4d6d3";
document.getElementById("toggle").style.borderWidth = "5px";
document.getElementById("switch").innerHTML = 3;
//console.log("toggle clicked 2nd time!");
} else if (key == 3) {
document.getElementById("toggle").style.backgroundColor = "#4eafef";
document.getElementById("toggle").style.backgroundImage = "url('')";
document.getElementById("toggle").style.borderStyle = "solid";
document.getElementById("toggle").style.borderColor = "#d4d6d3";
document.getElementById("toggle").style.borderWidth = "5px";
document.getElementById("switch").innerHTML = 1;
//console.log("toggle clicked 3rd time!");
}
}
</script>
</html>
There are a few problems which seem to result in Chrome/Edge behaving differently from Safari.
There is a style declaration within the body rather than the head element. This is picked up by an HTML validator as illegal HTML. The snippet below moves it to the head.
There is a setting for tr elements which implements a transform. This seems to encourage Chrome to position the fixed element relative to the table start rather than relative to the viewport. I don't have a full explanation for this other than to note that any sort of transform seems to result in this behaviour and that any transform will create a new stacking context.
There is a 3rd cell in the first row but not in the subsequent rows. This is picked up as a warning by the validator. I do not know how the table's layout is supposed to look in this circumstance, but of course the result is complicated by the fixed setting which takes the 3rd cell out of the flow visually.
This snippet takes the 3rd cell out and puts a button before the table instead. Together with the other changes Safari and Chrome/Edge now behave the same, with Safari doing the expected behavior on border-collapse.
The button's position needs working on - perhaps the button plus table should be in a container which gets positioned? It depends on exactly what is required in terms of fixing its position.
<!doctype html>
<html>
<head>
<style>
highlight {
background-color: #86C440;
color: white;
}
th {
font-size: 30px;
}
tr {
text-align: left;
}
td {
font-size: 20px;
background-color: #d4d6d3;
cursor: pointer;
}
.center {
margin-left: auto;
margin-right: auto;
}
/* REMOVED
tr {
position:relative;
transform:scale(1, 1);
}
*/
#toggle {
position: fixed;
border: 5px solid #d4d6d3;
background-color: #4eafef;
/* REMOVED
left: -46px;
top: -46px;
*/
/* values changed */
height: 30px;
width: 30px;
rline-height: 7px;
cursor: pointer;
}
</style>
<!-- MOVED FROM body -->
<style>
table {
border-collapse: collapse;
border: 5px solid white;
padding: 5px;
}
table td {
text-align: center;
color: black;
border: 5px solid white;
padding: 10px;
height: 66px;
width: 66px;
}
</style>
</head>
<body>
<div id="switch">1</div>
<br><br><br><br><br><br><br><br>
<div class="container">
<button id="toggle" class="last" onclick="toggle1()"></button>
<table class="center">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<!-- td last removed -->
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
<script>
function toggle1() {
var key = document.getElementById("switch").innerHTML;
if (key == 1) {
document.getElementById("toggle").style.backgroundColor = "white";
document.getElementById("toggle").style.backgroundImage = "url('')";
document.getElementById("toggle").style.borderStyle = "solid";
document.getElementById("toggle").style.borderColor = "#d4d6d3";
document.getElementById("toggle").style.borderWidth = "5px";
document.getElementById("switch").innerHTML = 2;
//console.log("toggle clicked 1st time!");
} else if (key == 2) {
document.getElementById("toggle").style.backgroundColor = "#a370f0";
document.getElementById("toggle").style.backgroundImage = "url('')";
document.getElementById("toggle").style.borderStyle = "solid";
document.getElementById("toggle").style.borderColor = "#d4d6d3";
document.getElementById("toggle").style.borderWidth = "5px";
document.getElementById("switch").innerHTML = 3;
//console.log("toggle clicked 2nd time!");
} else if (key == 3) {
document.getElementById("toggle").style.backgroundColor = "#4eafef";
document.getElementById("toggle").style.backgroundImage = "url('')";
document.getElementById("toggle").style.borderStyle = "solid";
document.getElementById("toggle").style.borderColor = "#d4d6d3";
document.getElementById("toggle").style.borderWidth = "5px";
document.getElementById("switch").innerHTML = 1;
//console.log("toggle clicked 3rd time!");
}
}
</script>
<script type="text/javascript">
</script>
</body>
</html>
I have a HTML table that I'm trying to change the cell background color to red depending on the value of the cell. Each cell will have a different threshold for when red is needed (one cell might be > 5, another > 10). The cells are sporadic throughout the table, and none are related to the other. Further, jquery is used to pull the value in from a value stored in a SharePoint list. Is there some way to check the value when it's pulled from the list and change the color before it's inserted in the table? Not sure what the best approach is for this. Thanks in advance for any help offered!
Table row code:
<tr>
<td colspan="3" style="width:30%; background-color:#015A78; color:White; text-align:center;
font-size:20pt; font-weight:bold; border-width:thick; border-style:inset"><div
id="subjectivehoverMouseover" title="">Subjective</div></td>
<td style="background-color:Black; color:White; text-align:center; font-weight:bold; border-
style:inset"><div id="SubjectiveDays"></div></td>
<td></td>
</tr>
And the jquery to pull in the value for SubjectiveDays in the last cell above:
if (listItem.Title === "subjectivegrading") {
$("#SubjectiveDays").text(listItem.c3t9 + " Business Days");
}
To go with one cell, using your example that I copied for two others, changing the ID, could look something like this:
let listItem = {};
listItem.Title = 'subjectivegrading';
listItem.c3t9 = 5;
if (listItem.Title === "subjectivegrading") {
$("#SubjectiveDays").text(listItem.c3t9 + " Business Days");
$("#SubjectiveDays").addClass('red');
}
listItem.c3t9 = 10;
if (listItem.Title === "subjectivegrading") {
$("#SubjectiveDays2").text(listItem.c3t9 + " Business Days");
$("#SubjectiveDays2").addClass('yellow');
}
listItem.c3t9 = 15;
if (listItem.Title === "subjectivegrading") {
$("#SubjectiveDays3").text(listItem.c3t9 + " Business Days");
$("#SubjectiveDays3").addClass('green');
}
.red {
color: red;
}
.yellow {
color: yellow;
}
.green {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td style="background-color:Black; color:White; text-align:center; font-weight:bold; border-
style:inset"><div id="SubjectiveDays"></div></td>
<td></td>
<td style="background-color:Black; color:White; text-align:center; font-weight:bold; border-
style:inset"><div id="SubjectiveDays2"></div></td>
<td></td>
<td style="background-color:Black; color:White; text-align:center; font-weight:bold; border-
style:inset"><div id="SubjectiveDays3"></div></td>
<td></td>
</tr>
</table>
However, you would probably want to make a function to pass a cell's ID reference and the listItem.c3t9 value to apply the CSS in more helpful way, and that could look something like this:
let listItem = {};
listItem.Title = 'subjectivegrading';
listItem.c3t9 = 5;
function setElementCSS(elementRef, listItem) {
if (listItem.Title === "subjectivegrading") {
$('#' + elementRef).text(listItem.c3t9 + " Business Days");
addCSS = '';
if (listItem.c3t9 > 10) {
addCSS = 'green';
} else if (listItem.c3t9 > 5) {
addCSS = 'yellow';
} else {
addCSS = 'red';
}
$('#' + elementRef).addClass(addCSS);
}
}
setElementCSS('SubjectiveDays', listItem);
listItem.c3t9 = 10;
setElementCSS('SubjectiveDays2', listItem);
listItem.c3t9 = 15;
setElementCSS('SubjectiveDays3', listItem);
.red {
color: red;
}
.yellow {
color: yellow;
}
.green {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td style="background-color:Black; color:White; text-align:center; font-weight:bold; border-
style:inset"><div id="SubjectiveDays"></div></td>
<td></td>
<td style="background-color:Black; color:White; text-align:center; font-weight:bold; border-
style:inset"><div id="SubjectiveDays2"></div></td>
<td></td>
<td style="background-color:Black; color:White; text-align:center; font-weight:bold; border-
style:inset"><div id="SubjectiveDays3"></div></td>
<td></td>
</tr>
</table>
I am using data table for displaying data from the database. There is no space between two columns of the data table. How to add space between them. I tried few codes but with no luck...
<html dir="rtl">
<title>moviewall</title>
<style>
#font-face { font-family: "Alef Regular"; src: url("https://s3.eu-central-1.amazonaws.com/moviewall/Alef-Regular.ttf"); }
body { font-family: "Alef Regular", serif }
margin: 0;
font-size: 500%;
font-family: "Alef Regular";
color: white;
line-height: 2.7;
}
</style>
<div id="content"><div dir="ltr">Loading...</div></div>
<script src="lib.js"></script>
<script>
function getHead() {
var row = document.createElement('tr');
['Movie', 'Hall', 'Time'].forEach(function (text) {
var column = document.createElement('th');
column.appendChild(document.createTextNode(text));
row.appendChild(column);
});
return row;
}
function getRow(item) {
var row = document.createElement('tr');
['time', 'hall', 'movie'].forEach(function (property) {
var column = document.createElement('td');
column.appendChild(document.createTextNode(item[property]));
row.appendChild(column);
});
return row;
}
function refreshData() {
var content = document.getElementById('content');
getAllData(function (data) {
clear(content);
var table = document.createElement('table');
table.appendChild(getHead());
data
.filter(function (item) {
var date = new Date();
var minutes1 = date.getHours() * 60 + date.getMinutes();
var minutes2 = convertTimeToMinutes(item.time);
return minutes2 >= minutes1 && minutes2 <= minutes1 + 120;
})
.forEach(function (item) {
table.appendChild(getRow(item));
});
content.appendChild(table);
});
}
setInterval(refreshData, getInterval());
refreshData();
</script>
Blockquote
How can i add space or gap between the columns tr text? 'time', 'hall', 'movie'
Right now they are attached to each other...
Thanks a lot
Shlomi
if you need padding around texts:
td {
padding: 10px;
}
If you want real space between table cells:
td {
border-spacing: 5px;
}
Use border-spacing, see example below:
table {
border-collapse: separate;
border-spacing: 30px 0;
}
td {
border: 1px solid red;
padding: 20px 0;
}
<table>
<tr>
<td>1st column</td>
<td>2nd column</td>
<td>3rd column</td>
<td>4th column</td>
</tr>
</table>
Just trying to filter a table but also have it filter the number with and without dashes (working) but also search the name and id as well. Its only searching the one column since the index is [0].
How would I have it search all 3 columns? So if I search number or id or name it would filter. Here is the working code I have so far to search number.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>Number search</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Number</th>
<th style="width:60%;">Name</th>
<th style="width:60%;">ID</th>
</tr>
<tr>
<td>905-373-3333</td>
<td>Mike</td>
<td>4563</td>
</tr>
<tr>
<td>905-333-3333</td>
<td>adam</td>
<td>8963</td>
</tr>
<tr>
<td>416-373-3432</td>
<td>Jim</td>
<td>9363</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i, cleanedFilter;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
cleanedFilter = filter.replace("-","");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
cellContent = td.innerHTML.toUpperCase().replace(/-/g,"");
if (cellContent.indexOf(cleanedFilter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
If you want to use a filter for every td available in your rows, you can use the following:
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
return {
init: function() {
var inputs = document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);
<section class="container">
<input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter">
<table class="order-table table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Number 2</th>
<th>Number 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column One</td>
<td>Two</td>
<td>352353</td>
<td>1</td>
</tr>
<tr>
<td>Column Two</td>
<td>Two</td>
<td>4646</td>
<td>2</td>
</tr>
</tbody>
</table>
</section>
Could someone help with this
http://jsfiddle.net/smilepak/8qRQB/4/
<div>
<table>
<tr>
<td class="headcol">Fiddle Options</td>
<td class="long">Created and maintained by Piotr and Oskar. Hosted by DigitalOcean. Special thanks to MooTools community.</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">Legal, Credits and Links</td>
<td class="long" style="width:300px">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long" style="width:300px">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">Ajax Requests</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</table>
table {
border-collapse:separate;
border-top: 1px solid grey;
}
td {
margin:0;
border:1px solid grey;
border-top-width:0px;
}
div {
width: 600px;
overflow-x:scroll;
margin-left:10em;
overflow-y:visible;
padding-bottom:1px;
}
.headcol {
position:absolute;
width:10em;
left:0;
top:auto;
border-right: 1px none black;
border-top-width:1px;
/*only relevant for first row*/
margin-top:-3px;
/*compensate for top border*/
}
In firefox, the row border doesn't seem to line up. I want a table where the first column is frozen while the rest is scrollable. All rows are linked up to a single scroll bar so i can use in a loop via Razor view in MVC.
Thanks,
JSBIN: http://jsbin.com/IwisANaX/3/edit
CSS
...
.freeze td:nth-child(1),
.freeze th:nth-child(1) {
background: #ddd;
position: absolute;
width: 20px;
left: 0;
}
.freeze .bottomScroll {
overflow-x: hidden;
margin-left: 20px;
}
...
JS
var ns = $('.newScroll', table),
bs = $('.bottomScroll', table);
ns.scroll(function(){bs.scrollLeft(ns.scrollLeft());});
try using
.headcol {max-width: 10em}
also note that using
.headcol {position: absolute}
makes the cell not to align relatively to the document; that´s why it looks like that
I used this combination of JavaScript and CSS to solve the sticky column issue.
https://jsfiddle.net/5poxyje4/
JS (Commented Section has boostrap compatible code)
var $table = $('.table');
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
$fixedColumn.find('th:not(:first-child),td:not(:first-child),.excludeHeader').remove();
$fixedColumn.find('tr').each(function (i, elem) {
if(elem.rowSpan = "1"){
$(this).height($table.find('tr:eq(' + i + ')').height());
}
else{
for (x = i; x <= parseInt(elem.rowSpan); x++) {
var tempHeight = $(this).height() + $table.find('tr:eq(' + x + ')').height();
$(this).height(tempHeight);
}
}
});
//Comments for if you are using bootrap tables
//var $table = $('.table');
//var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
//$fixedColumn.find('th:not(:first-child),td:not(:first-child),.excludeHeader').remove();
//$fixedColumn.find('tr').each(function (i, elem) {
// $fixedColumn.find('tr:eq(' + i + ') > th:first-child,tr:eq(' + i + ') > td:first-child').each(function (c, cell) {
// if (cell.rowSpan == "1") {
// $(this).height($table.find('tr:eq(' + i + '),tr:not(.excludeRow)').height());
// }
// else {
// for (x = 1; x < parseInt(cell.rowSpan) ; x++) {
// var tempHeight = $(this).height() + $table.find('tr:eq(' + x + ')').height();
// $(this).height(tempHeight);
// }
// }
// $(this).width($table.find('.stickyColumn').first().width());
// });
//});
CSS(Commented section has bootstrap compatible code in my Site.css)
.table-responsive>.fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
/* used z-index with bootstrap */
/*z-index: 9999;*/
}
/*This media query conflicted with my bootstrap container. I did not use it*/
#media(min-width:768px) {
.table-responsive>.fixed-column {
display: none;
}
}
/*Commented Section for if you are using bootstrap*/
/*.table-responsive>.fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
background-color:#ffffff;
}*/
This accounts for if a th or a td has a rowspan greater than 1 as well.