How to control the height of a table row - html

I have the following HTML table and there is a couple of problems with it. First the rows in the table are really large, the table row should be just large enough to fit the content inside of it. Second some of the inner divs are out of line with the rest of the divs in the row, in particular the ones that contains words that wrap onto a second line
<!DOCTYPE html>
<html>
<head>
<style>
.stopHoriz {
display:inline-block;
border: 1px solid black;
width:75px;
height:75px;
text-align:center;
font-size: .8em;
}
.stopVertical {
margin-bottom:3px;
border: 1px solid black;
width:75px;
height:75px;
text-align:center;
font-size: .8em;
}
</style>
</head>
<body>
<table border="1">
<tr style="height:75px">
<td colspan="2">
<div style="padding-right: 30px; vertical-align:top">
<div class="stopHoriz">Amusement</div>
<div class="stopHoriz">State Park</div>
<div class="stopHoriz">Zoo</div>
<div class="stopHoriz">History</div>
<div class="stopHoriz">Marine Encounters</div>
<div class="stopHoriz">Onset</div>
<div class="stopHoriz">Museum</div>
<div class="stopHoriz">Beaches</div>
</div>
</td>
<td rowspan="2" style="width:75px">
<div style="padding-bottom: 30px; vertical-align:top">
<div class="stopVertical">Amusement</div>
<div class="stopVertical">State Park</div>
<div class="stopVertical">Zoo</div>
<div class="stopVertical">History</div>
<div class="stopVertical">Marine Encounters</div>
<div class="stopVertical">Onset</div>
<div class="stopVertical">Museum</div>
<div class="stopVertical">Beaches</div>
</div>
</td>
</tr>
<tr>
<td rowspan="2" style="width:75px;">
<div style="padding-top: 30px">
<div class="stopVertical">Beaches</div>
<div class="stopVertical">Museum</div>
<div class="stopVertical">Onset</div>
<div class="stopVertical">Marine Encounters</div>
<div class="stopVertical">History</div>
<div class="stopVertical">Zoo</div>
<div class="stopVertical">State Park</div>
<div class="stopVertical">Amusement</div>
</div>
</td>
<td>Main</td>
</tr>
<tr style="height:75px">
<td colspan="2">
<div style="padding-left: 30px">
<div class="stopHoriz">Beaches</div>
<div class="stopHoriz">Museum</div>
<div class="stopHoriz">Onset</div>
<div class="stopHoriz">Marine Encounters</div>
<div class="stopHoriz">History</div>
<div class="stopHoriz">Zoo</div>
<div class="stopHoriz">State Park</div>
<div class="stopHoriz">Amusement</div>
</div>
</td>
</tr>
</table>
</body>
</html>


I figured out the answer. The rowspan is causing the problem and I had to remove the rowspan and use a negative margin on the second row instead.
<!DOCTYPE html>
<html>
<head>
<style>
.stopHoriz {
display:inline-block;
border: 1px solid black;
width:75px;
height:75px;
text-align:center;
font-size: .8em;
}
.stopVertical {
margin-bottom:3px;
border: 1px solid black;
width:75px;
height:75px;
text-align:center;
font-size: .8em;
}
</style>
</head>
<body>
<table border="1">
<tr style="height:75px;">
<td colspan="2">
<div style="padding-right: 30px; vertical-align:top">
<div class="stopHoriz">Amusement</div>
<div class="stopHoriz">State Park</div>
<div class="stopHoriz">Zoo</div>
<div class="stopHoriz">History</div>
<div class="stopHoriz">Marine Encounters</div>
<div class="stopHoriz">Onset</div>
<div class="stopHoriz">Museum</div>
<div class="stopHoriz">Beaches</div>
</div>
</td>
</tr>
<tr>
<td rowspan="2" style="width:75px;">
<div style="padding-top: 30px">
<div class="stopVertical">Beaches</div>
<div class="stopVertical">Museum</div>
<div class="stopVertical">Onset</div>
<div class="stopVertical">Marine Encounters</div>
<div class="stopVertical">History</div>
<div class="stopVertical">Zoo</div>
<div class="stopVertical">State Park</div>
<div class="stopVertical">Amusement</div>
</div>
</td>
<td>Main</td>
<td style="width:75px">
<div style="padding-bottom: 30px; vertical-align:top; margin-top: -83px">
<div class="stopVertical">Amusement</div>
<div class="stopVertical">State Park</div>
<div class="stopVertical">Zoo</div>
<div class="stopVertical">History</div>
<div class="stopVertical">Marine Encounters</div>
<div class="stopVertical">Onset</div>
<div class="stopVertical">Museum</div>
<div class="stopVertical">Beaches</div>
</div>
</td>
</tr>
<tr style="height:75px">
<td colspan="2">
<div style="padding-left: 30px">
<div class="stopHoriz">Beaches</div>
<div class="stopHoriz">Museum</div>
<div class="stopHoriz">Onset</div>
<div class="stopHoriz">Marine Encounters</div>
<div class="stopHoriz">History</div>
<div class="stopHoriz">Zoo</div>
<div class="stopHoriz">State Park</div>
<div class="stopHoriz">Amusement</div>
</div>
</td>
</tr>
</table>
</body>
</html>

Related

How to right align the button in html

Actually I am trying to append the content from js to html table.And also with it I am trying to add a button below the table to the extreme right of the page.But I am not able to align it.Please guide where am I going wrong.
HTML Code is:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 20px;
}
#table {
margin-left: -900px;
}
<!DOCTYPE html>
<html>
<head>
<body>
<div id="table" style="display:none">
<div class="container text-center">
<div class="row">
<div class="col-sm-4"></div>
<!--If I remove this line the table only will not be displayed-->
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Reportees List</div>
<table id="employee_table" class="table table-hover" cellspacing="0" width="100%">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
</tr>
</table>
</div>
</div>
<div id="jiratable" style="display:none">
<div class="container text-center">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div class="panel panel-primary" style="width: 240%;">
<div class="panel-heading">JIRA - List</div>
<table class="table table-hover">
<table id="Jira_table" class="table table-hover" cellspacing="0" style="width:240%;table-layout:fixed">
<thead>
<tr>
<th width="80">Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id="sendMail" class="btn btn-primary btn-lg pull-right" onclick="sendMail()">SendMail</button>
</div>
</div>
</body>
</html>
I don't know where I am going wrong.
Expected output is:
Number id name count Number JiraNumber Jirastatus EmailId
1 AG RAJ 0 1 TR-150 RS-Release **#gmail
2 TG Ram 3 1 TR-152 RS1-Release **#gmail
1 TR-153 RS2-Release **#gmail
SendMail Cancel
So I want the SendMail and cancel button to right.But the output is:
Number id name count Number JiraNumber Jirastatus EmailId
1 AG RAJ 0 1 TR-150 RS-Release **#gmail
2 TG Ram 3 1 TR-152 RS1-Release **#gmail
1 TR-153 RS2-Release **#gmail
SendMail Cancel

This is a list of your problems.
You're missing alot of closing tags
Your table won't display because you have style="display:none" which mean it won't display.
info for display
In the code you have lots of missing aligns which makes the table weird.
class="btn btn-primary btn-lg pull-right" this class is already right align
To align the tables side by side, either make a parent table for the data table or **within the CSS, you can set the division positioning **(which mean more work/more code you need to have)
Im suggesting you use this code.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50px;
/*edit this as you want*/
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 20px;
}
/* to clear the border */
.noborder {
border: none;
}
<!DOCTYPE html>
<html>
<body>
<table>
<td>
<div id="table" style="display:block">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Reportees List</div>
<table id="employee_table" class="table table-hover" cellspacing="0" width="100%">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</td>
<td>
<div id="jiratable" style="display:block">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">JIRA - List</div>
<table id="Jira_table" class="table table-hover" cellspacing="0">
<tr>
<th>Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</td>
<tr>
<td class="noborder"></td>
<td class="noborder">
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id="sendMail" onclick="sendMail()">SendMail</button>
</div>
</div>
</td>
</table>
</body>
</html>
Summary
The important thing you need to change are the closing of tags. This might effect your output.
Refer:
About closing tag

*You are not properly closed end div tags properly
*remove style hidden
*merge two tables and remove a border
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
border: none !important;
}
td,
th {
text-align: left;
padding: 20px;
}
<!DOCTYPE html>
<html>
<body>
<div id="table" style="display:block">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Reportees List</div>
<table id="employee_table" class="table table-hover" cellspacing="0" width="100%" cellspacing="0">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
<th>Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
<tr>
<td>1</td>
<td> Ag</td>
<td>1</td>
<td>Raj </td>
<td>0</td>
<td>1 </td>
<td>TR0-150</td>
<td>GMAIL </td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id="sendMail" class="btn btn-primary btn-lg pull-right" style="color: white; background-color: blue;padding:5px" onclick="sendMail()">SendMail</button>
</div>
</div>
</body>
</html>

How to center the paragraph under box of div?

I have some boxes of div element; each of the box I would like to have text of .... underneath, center-aligned .
This is what I already have:
.box {
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
display: inline-block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table style="width:100%;border:none;">
<tr class="moul">
<th style="width:10%;">
<p class="text-center">Winest</p>
</th>
<th>
<p class="text-center">Party B</p>
</th>
<th style="width:50%;">
<p class="text-center">Party A</p>
</th>
</tr>
<tr>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
</td>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
</td>
<td>
<p class="text-center">MFI Institution</p>
<p class="text-center">Signature</p>
<p class="text-center">............</p>
</td>
</tr>
</table>
Here is final result I tried to achieve
Yet, I could not have ..... text underneath the box correctly. Thanks.

What about using flex?
It's a bit hacky to get it beneath to box but there you go.
.box {
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
display: inline-flex;
align-items: flex-end;
justify-content: center;
}
.box p {
position: relative;
bottom: -25px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table style="width:100%;border:none;">
<tr class="moul">
<th style="width:10%;">
<p class="text-center">Winest</p>
</th>
<th>
<p class="text-center">Party B</p>
</th>
<th style="width:50%;">
<p class="text-center">Party A</p>
</th>
</tr>
<tr>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
</td>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
</td>
<td>
<p class="text-center">MFI Institution</p>
<p class="text-center">Signature</p>
<p class="text-center">............</p>
</td>
</tr>
</table>

I have also a solution just with edit on the p.
.box {
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
display: inline-block;
}
.box>p{
display: flex;
justify-content: center;
align-items: flex-end;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table style="width:100%;border:none;">
<tr class="moul">
<th style="width:10%;">
<p class="text-center">Winest</p>
</th>
<th>
<p class="text-center">Party B</p>
</th>
<th style="width:50%;">
<p class="text-center">Party A</p>
</th>
</tr>
<tr>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
</td>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
</td>
<td>
<p class="text-center">MFI Institution</p>
<p class="text-center">Signature</p>
<p class="text-center">............</p>
</td>
</tr>
</table>

You can make the p element absoultely positioned, with position: relative for the .box element and according position settings as in the example below:
.box {
position: relative;
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
display: inline-block;
margin-bottom: 30px;
}
.box p {
position: absolute;
bottom: -30px;
left: 0;
right: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table style="width:100%;border:none;">
<tr class="moul">
<th style="width:10%;">
<p class="text-center">Winest</p>
</th>
<th>
<p class="text-center">Party B</p>
</th>
<th style="width:50%;">
<p class="text-center">Party A</p>
</th>
</tr>
<tr>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
</td>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
</td>
<td>
<p class="text-center">MFI Institution</p>
<p class="text-center">Signature</p>
<p class="text-center">............</p>
</td>
</tr>
</table>

Replacing an html table with a div tag

I have an html table on my website (emma-moore.com) that I'm using for layout instead of tabular data:
<table border="0" cellpadding="5px" width="100%" class="followFont">
<tbody>
<tr>
<td align="left">Follow your heart</td>
</tr>
<tr>
<td align="left" style="padding-bottom: 10px">and you'll always</td>
</tr>
<tr>
<td align="left">
<img border="0" src="balloonsAndLavenderFields.jpg" width="99px" height="150px" class="homePictureFrame" />
</td>
</tr>
<tr>
<td align="left" style="padding-top: 10px">end up where your</td>
</tr>
<tr>
<td align="left">soul needs to be.</td>
</tr>
</tbody>
</table>
Best practice is not to use inline styles and tables for layout, and I'm wondering how to replace the table with a div block and put the text and the jpg inside the div block in such a way that the text and jpg display the same way as they do when using the table. How can I best do this with css and a div block?
Thanks,
William

.followFont
{
padding:5px;
border:0;
cellpadding:5px;
width:100%;
display:table;
}
<div class="followFont">
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">Follow your heart</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left; padding-bottom: 10px;">and you'll always</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">
<img border="0" src="balloonsAndLavenderFields.jpg" width="99px" height="150px" class="homePictureFrame" />
</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left; padding-top: 10px;">end up where your</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">
soul needs to be.
</div>
</div>
</div>

Link:-https://html-cleaner.com/features/replace-html-table-tags-with-divs/
<h2>Phone numbers</h2>
<table width="300" border="1" cellpadding="5" style="text-align: center">
<tr>
<th width="75"><strong>Name</strong></th>
<th><span style="font-weight: bold;">Telephone</span></th>
<th> </th>
</tr>
<tr>
<td>John</td>
<td>0123 456 785</td>
<td><img src="images/check.gif" alt="checked" /></td>
</tr>
<tr>
<td>Cassie</td>
<td>9876 532 432</td>
<td><img src="images/check.gif" alt="checked" /></td>
</tr>
</table>
<h2>Phone numbers</h2>
<div class="rTable">
<div class="rTableRow">
<div class="rTableHead"><strong>Name</strong></div>
<div class="rTableHead"><span style="font-weight: bold;">Telephone</span></div>
<div class="rTableHead"> </div>
</div>
<div class="rTableRow">
<div class="rTableCell">John</div>
<div class="rTableCell">0123 456 785</div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
<div class="rTableRow">
<div class="rTableCell">Cassie</div>
<div class="rTableCell">9876 532 432</div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
</div>

You can use
<div id="table" style="display: table;">
<div class="cell" id="cell1"></div>
<div class="cell" id="cell2"></div>
<div class="cell" id="cell3"></div>
</div>
You'll be using like table
Div can have the same properties as table
like
#table
{
vertical-align:middle;
text-align:center:
border:solid 1px #ddd;
width:100%;
}
.cell
{
display:table-cell;
vertical-align:middle;
text-align:center;
border:solid 1px #ddd;
width:25%;
padding:10px;
}
and soon....
Hope this helps

table in div goes outside of container in responsive mode

I have a table that is inside of a div. In responsive mode, the table goes outside of the div area and looks like this:
I am trying to have the table move to center in responsive mode. I want it to look like this:
Currently, when the screen width gets small, the table will not get close enough to the left to fit in the container. I do not want the table to go outside of the container.
Does anyone know how I can accomplish this?
.slice-table {
vertical-align: middle;
display: block;
cursor: pointer;
cursor: hand;
}
.inner {
width: 50%;
margin: 0 auto;
font-size: 6px;
color: #FFFFFF;
}
.spacer-20 {
font-size: 0;
height: 20px;
line-height: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="st-container">
<div class="st-content" id="content">
<div class="st-content-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
<!-- Progress table -->
<div>
<div class="inner">
<table id="Table_01" width="401" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="401" height="400" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

How about adding
overflow-x: auto;
To the div.inner element. Altough I´m not sure if this is what you want. Your CSS would be something like
.inner {
width: 50%;
margin: 0 auto;
font-size: 6px;
color: #FFFFFF;
overflow-x: auto; // When the table exceeds the size of the container, the container creates a scrollbar.
}
I took the liberty of adding a second cell for demostrations sake.
.slice-table {
vertical-align: middle;
display: block;
cursor: pointer;
cursor: hand;
}
.inner {
width: 50%;
margin: 0 auto;
font-size: 6px;
color: #FFFFFF;
overflow-x: auto;
}
.spacer-20 {
font-size: 0;
height: 20px;
line-height: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="st-container">
<div class="st-content" id="content">
<div class="st-content-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
<!-- Progress table -->
<div>
<div class="inner">
<table id="Table_01" width="401" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="401" height="400" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>
<td width="401" height="400" align="center" valign="middle" bgcolor="red">Cell 2</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Try the img-responsive class on your images like this:
<!DOCTYPE html>
<html>
<head>
<style>
.slice-table {
vertical-align: middle;
display: block;
cursor: pointer;
cursor: grab;
}
.inner {
width: 50%;
margin: 0 auto;
font-size: 6px;
color: #FFFFFF;
}
.spacer-20 {
font-size: 0;
height: 20px;
line-height: 0;
}
</style>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="st-container">
<div class="st-content" id="content">
<div class="st-content-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
<!-- Progress table -->
<div>
<div class="inner">
<table id="Table_01" class="table-responsive" width="401" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="38">
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_01.png' %}" width="400" height="4" alt="">
</td>
<td>
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/spacer.gif' %}" width="1" height="4" alt="">
</td>
</tr>
<tr>
<td rowspan="48">
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_02.png' %}" width="2" height="395" alt="">
</td>
<td width="61" height="48" colspan="3" rowspan="3" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>
<td rowspan="5">
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_04.png' %}" width="2" height="50" alt="">
</td>
<td width="58" height="48" colspan="3" rowspan="3" align="center" valign="middle" bgcolor="#75904A">Cell 2</td>
<td colspan="27">
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_06.png' %}" width="212" height="2" alt="">
</td>
<td width="62" height="206" colspan="2" rowspan="24" align="center" valign="middle" bgcolor="#75904A">Cell 3</td>
<td rowspan="48">
<img class="slice-table img-responsive" src="#" width="3" height="395" alt="">
</td>
<td>
<img class="slice-table img-responsive" src="#" width="1" height="2" alt="">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Bug in Firefox? Table being rendered differently in Chrome/IE & Firefox

Following JS Fieddle shows expected output on IE & Chrome, But in Firefox, it's completely different.
Whats problem?
http://jsfiddle.net/webtiki/kQXkt/7/
table {
width:90%;
}
td {
width:30%;
position:relative;
}
td .dummy{
margin-top:100%;
}
td .content {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:gold;
}
<table>
<tr>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
</tr>
<tr>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
</tr>
<tr>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
</tr>
<table>