Suppose this table :
<table>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
</table>
With this CSS:
<style>
.even{background:red;}
</style>
How can I write a pure js code that adds even class to even tr's of table ? [No jQuery]
If you just need it for style reasons, you can use CSS3 selectors (no JavaScript needed):
tr:nth-child(odd) {
background-color: red;
}
tr:nth-child(even) {
background-color: green;
}
Give the table an ID:
<table id="mytable"></table>
then:
var i, len,
// assuming only one tbody
// if none specified, it is automatically generated (like in your example)
// if you were to have several you would have to iterate over those too
rows = document.getElementById("mytable").
getElementsByTagName("tbody")[0].
getElementsByTagName("tr");
for (i = 1, len = rows.length; i < len; i += 2) {
rows[i].className += " even";
}
Just grab the table element by ID and loop the rows adding classnames as in this fiddle
<table id='myTable'>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
</table>
var table = document.getElementById('myTable');
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "even";
}else{
rows[i].className = "odd";
}
}
How about this one from this page full of table style tips. It does both odd and even rows, but you can alter it to suit your situation.
<!-- Javascript goes in the document HEAD -->
<script type="text/javascript">
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');
}
</script>
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
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;
}
.oddrowcolor{
background-color:#d4e3e5;
}
.evenrowcolor{
background-color:#c3dde0;
}
</style>
<!-- Table goes in the document BODY -->
<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>
<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>
<!-- The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->
I have corrected , here is answer:
<html>
<head>
<title></title>
<meta name="author" content="SAP"/>
<meta name="keywords" content="key1,key2"/>
<style>
.even{color:red;background:blue;}
</style>
<script type="text/javascript">
var i, len;
function onload() {
var i, len, rows = document.getElementById("mytable").getElementsByTagName("tr");
for (i = 1, len = rows.length; i < len; i += 2) {
rows[i].className += " even";
}
}
</script>
</head>
<body onload="onload()">
<table id="mytable">
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
</table>
</body>
</html>
Related
I am working on a project where I have an HTML table and I need to offer users the option to swap two HTML table cells content.
Specifically, a user can click to select a row, then choose to move that row up or down. Really, they are only moving the content of column 2, which represents the information. Column 1 represents order, which will not change.
The table will be two total columns.
Column 1 will represent linear order (i.e. 1-10), it will not change.
Column 2 will be database-provided information (in the example code I provided last name).
I have built two buttons, up and down, and utilized two Javascript functions that allow a user to select a row and move it up or down.
The current code successfully moves a whole row to go up or down, but I only need the cell contents of column 2 to go up or down.
Please take a look at the provided code and JSFiddle and let me know how I can solve this? Thanks in advance!
var index; // variable to set the selected row index
function getSelectedRow() {
var table = document.getElementById("table");
for (var i = 1; i < table.rows.length; i++) {
table.rows[i].onclick = function() {
// clear the selected from the previous selected row
// the first time index is undefined
if (typeof index !== "undefined") {
table.rows[index].classList.toggle("selected");
}
index = this.rowIndex;
this.classList.toggle("selected");
};
}
}
getSelectedRow();
function upNdown(direction) {
var rows = document.getElementById("table").rows,
parent = rows[index].parentNode;
if (direction === "up") {
if (index > 1) {
parent.insertBefore(rows[index], rows[index - 1]);
// when the rowgo up the index will be equal to index - 1
index--;
}
}
if (direction === "down") {
if (index < rows.length - 1) {
parent.insertBefore(rows[index + 1], rows[index]);
// when the row go down the index will be equal to index + 1
index++;
}
}
}
tr {
cursor: pointer
}
.selected {
background-color: red;
color: #fff;
font-weight: bold
}
button {
margin-top: 10px;
background-color: #eee;
border: 2px solid #00F;
color: #17bb1c;
font-weight: bold;
font-size: 25px;
cursor: pointer
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<meta content="30" http-equiv="refresh">
<title> {{.Title}} </title>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>
<body>
<header>
</header>
<main>
<table id="table" border="1">
<tr>
<th>Order</th>
<th>Last Name</th>
</tr>
<tr>
<td>1</td>
<td>Smith</td>
</tr>
<tr>
<td>2</td>
<td>Johnson</td>
</tr>
<tr>
<td>3</td>
<td>Roberts</td>
</tr>
<tr>
<td>4</td>
<td>Davis</td>
</tr>
<tr>
<td>5</td>
<td>Doe</td>
</tr>
</table>
<button onclick="upNdown('up');">↑</button>
<button onclick="upNdown('down');">↓</button>
</main>
<!-- Bootstrap core JavaScript -->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/js/sidebar.js"></script>
</body>
</html>
Link to JSFiddle
This answer makes changes the posted code for simplicity (at least on the surface) and to prevent moving the header row down the table using the buttons:
A reference to the selected row is held rather than an index.
In HTML, the header row has been placed within a thead element, and the data rows within a tbody element (important in code).
When moving a row, the order of two rows is reversed, and then the textContent of their first cells swapped - without moving the "order" column cells to different rows. If this is too simple you could swap the innerHTML property of the cells instead.
Whilst making changes, clicking a row a second time was used to deselect it: clicking outside the table would be another thing you could monitor, as you wish.
"use strict";
const tbody = document.querySelector("#table tbody");
let selected = null;
tbody.addEventListener("click", function(e){
let row = e.target.closest("tr");
if( row === selected) {
row.classList.toggle("selected")
selected = null;
}
else {
if(selected) {
selected.classList.toggle("selected");
}
selected = row;
row.classList.toggle("selected");
}
});
function upNdown( direction) {
let up, down;
if( selected) {
up = direction == "up" ? selected : selected.nextElementSibling;
down = direction == "up" ? selected.previousElementSibling : selected;
if( up && down) {
tbody.insertBefore(up, down); // put up before down
var temp = up.firstElementChild.textContent; // swap first cells' text content
up.firstElementChild.textContent = down.firstElementChild.textContent;
down.firstElementChild.textContent = temp;
}
}
}
tr {
cursor: pointer
}
.selected {
background-color: red;
color: #fff;
font-weight: bold
}
<table id="table" border="1">
<thead>
<tr>
<th>Order</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Smith</td>
</tr>
<tr>
<td>2</td>
<td>Johnson</td>
</tr>
<tr>
<td>3</td>
<td>Roberts</td>
</tr>
<tr>
<td>4</td>
<td>Davis</td>
</tr>
<tr>
<td>5</td>
<td>Doe</td>
</tr>
</tbody>
</table>
<button onclick="upNdown('up');">↑</button>
<button onclick="upNdown('down');">↓</button>
It depends on exactly what you want. You mention having tried moving innerHTML so this snippet does that - leaving any attributes on the two tds unmoved (see Note below):
var index; // variable to set the selected row index
function getSelectedRow() {
var table = document.getElementById("table");
for (var i = 1; i < table.rows.length; i++) {
table.rows[i].onclick = function() {
// clear the selected from the previous selected row
// the first time index is undefined
if (typeof index !== "undefined") {
table.rows[index].classList.toggle("selected");
}
index = this.rowIndex;
this.classList.toggle("selected");
};
}
}
getSelectedRow();
function upNdown(direction) {
var rows = document.getElementById("table").rows,
parent = rows[index].parentNode;
if (direction === "up") {
if (index > 1) {
// get the relevant cell which is the second one as we know only tds are the children
let td = rows[index].children[1];
let tdAbove = rows[index - 1].children[1];
let temp = td.innerHTML;
td.innerHTML = tdAbove.innerHTML;
tdAbove.innerHTML = temp;
// when the rowgo up the index will be equal to index - 1
index--;
}
}
if (direction === "down") {
if (index < rows.length - 1) {
let td = rows[index].children[1];
let tdBelow = rows[index + 1].children[1];
let temp = td.innerHTML;
td.innerHTML = tdBelow.innerHTML;
tdBelow.innerHTML = temp;
// when the row go down the index will be equal to index + 1
index++;
}
}
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
tr {
cursor: pointer
}
.selected {
background-color: red;
color: #fff;
font-weight: bold
}
button {
margin-top: 10px;
background-color: #eee;
border: 2px solid #00F;
color: #17bb1c;
font-weight: bold;
font-size: 25px;
cursor: pointer
}
<body>
<header>
</header>
<main>
<table id="table" border="1">
<tr>
<th>Order</th>
<th>Last Name</th>
</tr>
<tr>
<td>1</td>
<td>Smith</td>
</tr>
<tr>
<td>2</td>
<td>Johnson</td>
</tr>
<tr>
<td>3</td>
<td>Roberts</td>
</tr>
<tr>
<td>4</td>
<td>Davis</td>
</tr>
<tr>
<td>5</td>
<td>Doe</td>
</tr>
</table>
<button onclick="upNdown('up');">↑</button>
<button onclick="upNdown('down');">↓</button>
</main>
Note: in the question the idea of moving a whole element, not just its contents, is introduced. You could do that instead of swapping the contents (i.e. all the attributes would also get moved) by using for example outerHTML. However, this may not be what you want because there may be for example an inline style on the top element which highlights it in gold if this is a leader board. It depends on exactly what your requirement is.
Note also that the snippet assumes the table is well-formed in the sense that there are no non-td elements as direct children within the selectable rows.
I am trying to create some code for a class that prompts the user to input three numbers then preforms some calculations to those numbers, the math is to square one number, multiply and multiply the number by PI then display them in the appropriate cells. Right now my onClick is not working and there is no prompt coming up for the user. I have the min and max functions in there so because it's required
Here is my code:
function promptForNumber(promptString, min, max) {
Array.prototype.max = function() {
return Math.max.apply(null, this);
};
Array.prototype.min = function() {
return Math.min.apply(null, this);
};
}
function populateRow(row) {
var number = promptForNumber("Enter your number");
row.cells[0].innerHTML = number;
row.cells[1].innerHTML = Math.pow(number, 2);
row.cells[2].innerHTML = (number / Math.PI).toFixed(4);
}
function isNotANumber(NaN) {
var isNotANumer = promptForAValidNumber("Please enter a
valid number ")
}
table,
th,
tr,
td {
border-collapse: collapse;
}
table {
width: 80%;
margin: 10%;
}
th {
width: 33%;
border: 2px solid black;
justify-content: space-evenly;
height: 25px;
background-color: white;
}
td {
border: 1px solid black;
padding: 1%;
text-align: center;
background-color: greenyellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assignment 2</title>
</head>
<body>
<table>
<tr>
<th>Number</th>
<th>Squared</th>
<th>Divided by Pi</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
This looks like a homework question as you mentioned it's for a class, so I cannot give you the exact solution to the problem. However, I will point out what is wrong with your code at the moment.
You mentioned that your "onClick" is not working, but you do not have any onClick functions in this code.
You need to use the window.prompt() method to prompt for user input in JS.
You need to create a button that the user can press to receive an alert. Add an event listener onto this button that prompts the user to enter a number. You can get help with this here. After you have the number from the prompt stored in a variable, use that variable to perform the different mathematical operations, and have these be added to the table.
You have extra line in your prompt code, please correct your code like below:
function isNotANumber(NaN) {
var isNotANumer = promptForAValidNumber("Please enter a valid number")
}
Also you must use standard method of prompt:
https://www.w3schools.com/jsref/met_win_prompt.asp
Infact you need to add the event listerner to listen for the click events.
May something like
<html lang="en">
<head>
<title>Assignment 2</title>
<style>
table, th, tr, td {
border-collapse: collapse;
}
table {
width: 80%;
margin: 10%;
}
th {
width: 33%;
border: 2px solid black;
justify-content: space-evenly;
height: 25px;
background-color: white;
}
td {
border: 1px solid black;
padding: 1%;
text-align: center;
background-color: greenyellow;
}
</style>
</head>
<body>
<table>
<tr>
<th>Number</th>
<th>Squared</th>
<th>Divided by Pi</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
function promptForNumber(promptString, min, max) {
Array.prototype.max = function() {
return Math.max.apply(null, this);
};
Array.prototype.min = function() {
return Math.min.apply(null, this);
};
}
function populateRow(row) {
var number = window.prompt("Enter your number");
var cell = row.getElementsByTagName("td");
cell[0].innerHTML = number;
cell[1].innerHTML = Math.pow(number, 2);
cell[2].innerHTML = (number / Math.PI).toFixed(4);
}
function isNotANumber(NaN) {
var isNotANumer = promptForAValidNumber("Please enter a valid number")
}
var table = document.getElementsByTagName("table")[0];
var rows = table.getElementsByTagName("tr");
console.log('rows', rows);
for (let i = 0; i < rows.length; i++) {
let currentRow = table.rows[i];
currentRow.addEventListener("click", function() {
populateRow(currentRow);
})
};
</script>
</body>
</html>
For me, the answer was putting the script tag of the JS file at the end of the HTML body tag.
<body>
<h1>Todo List</h1>
<ul>
<li>"new" - Add a Todo</li>
<li>"list" - List all Todos</li>
<li>"delete" - Remove specific Todo</li>
<li>"quit" - Quit App</li>
</ul>
<script src="app.js"></script>
</body>
</html>
I am dynamically creating HTML table like this :
for(var i=0; i<rowsToAdd ; i++){
tr = table.insertRow(-1);
var colsToAddLength = findColsToAddLength();
for(var j=0; j<colsToAddLength; j++){
var tabCell = tr.insertCell(-1);
var colToAdd = findColToAdd();
tabCell.innerHTML = colToAdd;
}
}
How can I change the color of a particular cell once it's clicked? I am a beginner in web development.
You can use it like this:
function alternate(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
//manipulate rows
if(i % 2 == 0){
rows[i].className = "even";
}else{
rows[i].className = "odd";
}
}
}
}
<style>
.odd{background-color: white;}
.even{background-color: gray;}
</style>
<table id="theTable">
<tr><td>0 - some txt</td></tr>
<tr><td>1 - some txt</td></tr>
<tr><td>2 - some txt</td></tr>
<tr><td>3 - some txt</td></tr>
<tr><td>4 - some txt</td></tr>
</table>
As I like to avoid JS whenever it's not too much trouble doing same thing with CSS, I would suggest below trick, however I can't fully reproduce your case as you provided too few details. Colors can be controlled via additional CSS classes.
table {
border-collapse: collapse;
}
td {
position: relative;
border: 1px solid #000000;
padding: 0;
}
.pseudo-checkbox {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
}
.cell-content {
padding: 10px;
}
.pseudo-checkbox:checked + .cell-content {
background: red;
}
<table>
<tbody>
<tr>
<td>
<input type="checkbox" class="pseudo-checkbox" />
<div class="cell-content">
123
</div>
</td>
<td>
<input type="checkbox" class="pseudo-checkbox" />
<div class="cell-content">
123
</div>
</td>
<td>
<input type="checkbox" class="pseudo-checkbox" />
<div class="cell-content">
123
</div>
</td>
</tr>
</tbody>
</table>
function change() {
var tds = document.getElementsByTagName("td");
var tds2 = tds.className;
console.log(tds);
for (var i = 0; i < tds.length; i++) {
if (tds[i].className === "marked") {
tds[i].className = "UNmarked";
} else {
tds[i].className = "marked";
}
}
}
function generTab(rows, cols) {
var html = "<table id='tb01'>";
for (var i = 1; i <= rows; i++) {
html += "<tr>"
for (var j = 1; j <= cols; j++) {
html += "<td class='marked' onclick='change()'>" + "</td>";
}
html += "</tr>"
}
return html + "</table>";
}
td.marked {
height: 50px;
width: 50px;
border: solid thin black;
cursor: pointer;
background-color: white;
}
td.UNmarked {
height: 50px;
width: 50px;
border: solid thin black;
cursor: pointer;
background-color: purple;
}
<div class="line">
Number of rows:
<input type="text" id="rows" />
</div>
<div class="line">
Number of cols:
<input type="text" id="cols" />
<span class="error"></span>
</div>
<input type="button" value="Generuj" id="gener" />
</div>
<div id="scene"></div>
I'm generating table by my own, and I want to change class of specified <td> by clicking on on it. The problem is that when I click on whichever <td> it is changing the classes of all of them, but I want to change that <td> class which I click.
May be you can do some thing like the following with a single class:
var tds = document.querySelectorAll("td");
tds.forEach(function(td){
td.addEventListener('click', function(){
this.classList.toggle('marked')
});
});
td {
border: 1px solid lightgray;
padding: 10px;
font-size: 20px;
}
.marked{
background-color: #4CAF50;
color: white;
}
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
Add click event listeners to all the td elements and implement a simple onClick function which adds/removes the desired css class.
const tds = Array.from(document.querySelectorAll('td'));
const onClick = ({ target }) => {
tds.forEach(td => td === target ? td.classList.add('active') : td.classList.remove('active'))
}
tds.forEach(td => td.addEventListener('click', onClick));
.active {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
The code you've written should be toggling the class of all tds in the document. I believe you're trying to change the class of the td that is being clicked. To do that, try something like (apologies in advance as I'm on my phone):
function change(e) {
let td = e.target;
if (td.classList.contains('marked')) {
td.className = 'UNmarked';
} else {
td.className = 'marked';
}
}
and be sure that that change is bound as the click event for each td.
If you can use jQuery...
$("td").click(function(){
$(this).toggleClass("marked")
.toggleClass("UNmarked");
});
I am using some code from "http://dotnetprof.blogspot.com/2012/08/html-table-search-using-javascript.html" to help me build a searchable table for my website.
I am having trouble editing the column widths. I have tried several different methods, including using "col style="width:5%;" as shown below.
Is there some feature in the code that's automatically adjusting the column widths so that I cannot edit them? I've looked at the solutions for all similar questions posted here and none have worked. Any help is appreciated.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Seacrh HTML table using Javascript</title>
<style type="text/css">
body { font-family: Verdana; font-size: 12pt; }
.container { width: 35%; margin: 0 auto; }
.search_box { padding: 1.5%; font-family: Verdana; font-size: 12pt; }
</style>
<script type="text/javascript">
function doSearch() {
var searchText = document.getElementById('searchTerm').value;
var targetTable = document.getElementById('dataTable');
var targetTableColCount;
//Loop through table rows
for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) {
var rowData = '';
//Get column count from header row
if (rowIndex == 0) {
targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
continue; //do not execute further code for header row.
}
//Process data rows. (rowIndex >= 1)
for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) {
var cellText = '';
if (navigator.appName == 'Microsoft Internet Explorer')
cellText = targetTable.rows.item(rowIndex).cells.item(colIndex).innerText;
else
cellText = targetTable.rows.item(rowIndex).cells.item(colIndex).textContent;
rowData += cellText;
}
// Make search case insensitive.
rowData = rowData.toLowerCase();
searchText = searchText.toLowerCase();
//If search term is not found in row data
//then hide the row, else show
if (rowData.indexOf(searchText) == -1)
targetTable.rows.item(rowIndex).style.display = 'none';
else
targetTable.rows.item(rowIndex).style.display = 'table-row';
}
}
</script>
</head>
<body>
<div class="container">
<h2>Seacrh HTML table using Javascript</h2>
<input type="text" id="searchTerm" class="search_box" onkeyup="doSearch()" />
<!--<input type="button" id="searchBtn" value="Search" class="search_box" onclick="doSearch()" />-->
<br /><br />
<table id="dataTable" border="1" width="100%" cellspacing="0" cellpadding="5">
<col style="width:5%;"></col>
<col style="width:30%"></col>
<col style="width:100%"></col>
<col style="width:55%"></col>
<col style="width:5%"></col>
<thead>
<tbody>
<tr>
<th>Name</th>
<th>Address</th>
<th>Dates Lived</th>
<th>Comments</th>
<th>Rating</th>
</tr>
</thead>
<tr>
<td>Nikhil Vartak</td>
<td>4224 3rd St., San Francisco, CA 94112</td>
<td>3/3/2000-4/7/2004</td>
<td>Fantastic</td>
<td>3/5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
you are limiting the .container div in width
that makes the table be at it's minimum width,so no manipulations are possible with columns.
if instead you would set the .container width to 90% or 100% ,it works
http://jsfiddle.net/pE2f5/
.container { width: 100%; margin: 0 auto;}