We Keep Coding

Convert table to div with CSS without tbody

I want to convert a table to div tables, but when I created the table in Dreamweaver it just added the <tbody> tag. Does I need it when converting the table to div-table ?
Here is the code of the table
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
As you can see I want a table using divs with
width="100%" border="0" align="left" cellpadding="0" cellspacing="0"
What is the correct way to do that? And is neccesary to set another div for the <tbody> tag ?

HTML
<div class="table">
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
</div>
CSS
.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.table .tr {
display: table-row;
}
.table .td {
display: table-cell;
vertical-align: middle;
text-align: left;
}
Hope this works for you. :)

Float <div> element on top of table?

When the <div> is expanded, the table gets expanded too. I intend to expand only the <div>, floating it over the table. How can I do this?
$(document).ready(function() {
$("div").click(function() {
$("div").css({
"height": "100px"
});
});
});
div {
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr>
<td>
<div>click</div>
</td>
</tr>
</table>

All you need is to set position:absolute for your div.
See CSS Layout - The position Property reference.
$(document).ready(function(){
$("div").click(function(){
$("div").css({"height":"100px"});
});
});
div{
background-color:grey;
}
table tr td{
height:20px;
width:20px;
}
div{
position:absolute;
top:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr><td>
<div>click</div>
</td>
<td>
2
</td>
</tr>
<tr>
<td>click</td>
<td>
2
</td>
</tr>
<tr>
<td>click</td>
<td>
2
</td>
</tr>
<tr><td>
click
</td>
<td>
2
</td>
</tr>
</table>

Table style messed up when printing

I'm trying to print a simple table, yet the layout seems to mess up. Does anybody know why?
Table to print
Print Preview
Here is the HTML and JS I have used to create the Table.
function printData() {
var divToPrint = document.getElementById("printtable");
newWin = window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
$('button').on('click', function() {
printData();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="printtable" style="border: 1px solid black; width: 90mm; height: 29mm;">
<div style="float: left; font-size: 10px; position: relative; top: 50%; transform: translateY(-50%); margin-left: 2mm;">
<p>
<img src="/" alt="" height="30">
</p>
<table>
<tbody>
<tr>
<td><u>Row 1</u> :</td>
<td> Row 1</td>
</tr>
<tr>
<td><u>Longer Row 2</u> :</td>
<td> Row 2</td>
</tr>
<tr>
<td><u>R3</u> :</td>
<td> Row 3</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<br />
<button>Print me</button>

You need to specify style related to print .
You can use #media print to specify styles for print

In the end, I used the solution proposed here is such alignment achievable without <table>?
By aligning my text without using the table tag, the text prints just fine.

Animate an element to slide over others and stretch to a set width

I have a table of headings and when one of the headings is clicked I want it to first stretch to the width of the table and then slide down over the others. When it is clicked again or another heading is clicked, any open one should return to its original state.
I have the following HTML:
<table style="width: 100%;">
<tbody>
<tr>
<td width='50%'>
<center class='buttons headings'>H1</center>
<div class='hidden'>some text</div>
</td>
<td width='50%'>
<center class='buttons headings'>H2</center>
<div class='hidden'>some text</div>
</td>
</tr>
<tr>
<td width='50%'>
<center class='buttons headings'>H3</center>
<div class='hidden'>some text</div>
</td>
<td width='50%'>
<center class='buttons headings'>H4</center>
<div class='hidden'>some text</div>
</td>
</tr>
</tbody>
</table>
My jQuery so far is as follows:
$(".headings").click(function(){
$(this).animate({width: "199%",
position: "relative",
top: "+=50px"
}, 1000);
$(this).next().slideToggle(100);
});
This successfully stretches the heading though doesn't move it down. I'm really not sure why, any help is fantastic, thank you!
Fiddle

To correctly use top, you need to also use position
.headings{
position:relative;
}
To undo the animation, use flag logic like
$(".headings").attr('data-undo', false);
$(".headings").click(function(){
var width = '100%', top = '-=50px';
var undo = $(this).attr('data-undo') == 'true';
if(!undo){
width = '199%';
top = '+=50px';
}
...
$(this).attr('data-undo', !undo);
});
$(".headings").attr('data-undo', false);
$(".headings").click(function(){
var width = '100%', top = '-=100px';
var undo = $(this).attr('data-undo') == 'true';
console.log(undo);
if(!undo){
width = '199%';
top = '+=100px';
}
$(this).animate({width: width,
top: top
}, 1000);
$(this).next().slideToggle(100);
$(this).attr('data-undo', !undo);
});
.headings{
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table style="width: 100%;">
<tbody>
<tr>
<td width='50%'>
<center class='buttons headings'>H1</center>
<div class='hidden'>some text</div>
</td>
<td width='50%'>
<center class='buttons headings'>H2</center>
<div class='hidden'>some text</div>
</td>
</tr>
<tr>
<td width='50%'>
<center class='buttons headings'>H3</center>
<div class='hidden'>some text</div>
</td>
<td width='50%'>
<center class='buttons headings'>H4</center>
<div class='hidden'>some text</div>
</td>
</tr>
</tbody>
</table>

Knowing which cell of table is selected on clicking ok.

I have a div displaying radio button allowing tables to be displayed and a ok and cancel button. When user clicks ok I would like to call a function whose action depends on the selected cell of the table. How can I achieve that?
Here the code:
<!-- Options Dialogue box for Basis -->
<div id="interfacebox basis_DB" class="dialogWindow fileDialog" style="display: none;">
<p>Basis Set Options</p>
<div id="minimal_basis" class="RadioButtonidle menu2" style="Top: 48px; left: 5px;" onclick="changeClass2(this)">
</div>
<div id="RadioOption" style="Top: 40px; left: 25px;">
<p>Minimal</p>
</div>
<table id="minimal_basis_DB" class="dialog" align="center" cellpadding="4" cellspacing="12" style="display: none;">
<tr>
<td cellid="STO-2G" class="tableButtonidle menu3" onclick="changeClass3(this)">
STO-2G
</td>
<td cellid="STO-3G" class="tableButtonidle menu3" onclick="changeClass3(this)">
STO-3G
</td>
<td cellid="STO-3G*" class="tableButtonidle menu3" onclick="changeClass3(this)">
STO-3G*
</td>
<td cellid="STO-6G" class="tableButtonidle menu3" onclick="changeClass3(this)">
STO-6G
</td>
</tr>
</table>
<div id="correlation_consistant" class="RadioButtonidle menu2" title="correlation_consistant" style="Top: 48px; left: 190px;" onclick="changeClass2(this)">
</div>
<div id="RadioOption" style="Top: 40px; left: 215px;">
<p>Correlation-Consistant</p>
</div>
<table id="correlation_consistant_DB" class="dialog" align="center" cellpadding="4" cellspacing="12" style="display: none;">
<tr>
<td cellid="apr-cc-pV(Q+d)Z" class="tableButtonidle menu3" onclick="changeClass3(this)">
apr-cc-pV(Q+d)Z
</td>
<td cellid="aug-cc-pCV5Z" class="tableButtonidle menu3" onclick="changeClass3(this)">
aug-cc-pCV5Z
</td>
<td cellid="aug-cc-pCVDZ" class="tableButtonidle menu3" onclick="changeClass3(this)">
aug-cc-pCVDZ
</td>
<td cellid="aug-cc-pCVQZ" class="tableButtonidle menu3" onclick="changeClass3(this)">
aug-cc-pCVQZ
</td>
<td cellid="aug-cc-pCV(T+d)Z" class="tableButtonidle menu3" onclick="changeClass3(this)">
aug-cc-pCV(T+d)Z
</td>
</tr>
</table>
<input id="basis_cancel" class="standardButtonidle" type="button" value="Cancel" style="bottom: 10px; right: 70px; float: right;" onclick="changeClass4('STO-2G');changeClass5('correlation_consistant');"/>
<input id="basis_ok" class="standardButtonidle" type="button" value="Done" style="bottom: 10px; right: 10px; float: right;"/>
</div>
Thanks a lot

You can use real radio buttons in your table.
But let me answer you question.
The main thing you're looking for, is this (see code)
<style>
#my_table td {
width: 100px;
cursor: pointer; /* (anything) clickable, better change the cursor */
}
#my_table td.red {
background-color: red;
}
#my_table td.green {
background-color: green;
}
#my_table td.blue {
background-color: blue;
color: white;
}
</style>
<table id="my_table">
<tr>
<td id="red1" class="red">1</td><td id="green1" class="green">2</td><td id="blue1" class="blue">3</td>
</tr>
<tr>
<td id="red2" class="red">4</td><td id="green2" class="green">5</td><td id="blue2" class="blue">6</td>
</tr>
<tr>
<td id="red3" class="red">7</td><td id="green3" class="green">8</td><td id="blue3" class="blue">9</td>
</tr>
</table>
<div id="display"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// make an onClick event
$('#my_table td').click(function(e) {
// inside the onClick. the <td> that was clicked upon is set to the variable this ( or $(this) if you need jQuery functions)
var clicked_on_cell = $(this);
// now lets read some properties: the innerHTML, the class and the index; and we display it in <div id="display"></div>
var index = $(this).index('#my_table td') // finds which of the cels it is. zero based !
var html = clicked_on_cell.html();
var className = clicked_on_cell.attr('class');
var id = clicked_on_cell.attr('id');
$('#display').html(
'innerHTML: ' + html
+ '<br>Class: ' + className
+ '<br>id: ' + id
+ '<br>index: ' + index
);
})
});
</script>