When you create a table with
table-layout: fixed;
and it consumes 100% width. Then you try to create 4 columns (10%, 10%, 40%, 40%)
However, some rows are only 2 columns long so we use colspan="2", this however breaks the predefined width value and distributes everything evenly.
My current solution is to have nested tables in td tags.
Is there a better way to do this or stop the colspan from breaking my width?
A simple 2 column example that breaks is below:
EDIT: CODE Updated the code for a better example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
table {
table-layout: fixed;
}
</style>
</head>
<body>
<table style="width: 100%">
<caption>Table of Contents</caption>
<tbody>
<tr>
<td style="width: 5%;">
<div>1</div>
</td>
<td style="width: 95%;" colspan="2">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>2</div>
</td>
<td style="width: 5%;">
<div>-</div>
</td>
<td style="width: 90%;">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>3</div>
</td>
<td style="width: 5%;">
<div>-</div>
</td>
<td style="width: 90%;">
<div>Chapter Name</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
UPDATED WITH SOLUTION
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table style="width: 100%">
<colgroup>
<col class="short" />
<col class="short" />
<col class="long" />
</colgroup>
<tr>
<td colspan="3">
<div>Table of Contents</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>1</div>
</td>
<td style="width: 95%;" colspan="2">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>2</div>
</td>
<td style="width: 5%;">
<div>-</div>
</td>
<td style="width: 90%;">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td>
<div>3</div>
</td>
<td>
<div>-</div>
</td>
<td>
<div>Chapter Name</div>
</td>
</tr>
</table>
</body>
</html>
CSS
table {
table-layout: fixed;
}
.short {
width: 5%;
}
.long {
width: 90%;
}
table {
table-layout: fixed;
}
.short {
width: 5%;
}
.long {
width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table style="width: 100%">
<colgroup>
<col class="short" />
<col class="short" />
<col class="long" />
</colgroup>
<tr>
<td colspan="3">
<div>Table of Contents</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>1</div>
</td>
<td style="width: 95%;" colspan="2">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>2</div>
</td>
<td style="width: 5%;">
<div>-</div>
</td>
<td style="width: 90%;">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td>
<div>3</div>
</td>
<td>
<div>-</div>
</td>
<td>
<div>Chapter Name</div>
</td>
</tr>
</table>
</body>
</html>
You can use colgroup (original answer here)
html * {
font-size: 98%;
color: #000;
font-family: Arial !important;
}
table {
table-layout: fixed;
width: 100%;
}
th,
td {
padding: 15px;
word-break: break-all;
border: 1px solid black;
}
.short {
width: 5%;
}
.long {
width: 95%;
}
<table style="width: 100%">
<colgroup>
<col class="short" />
<col class="long" />
</colgroup>
<tr>
<td colspan="2">
<div style="font-size: 300%;">Table of Contents</div>
</td>
</tr>
<tr>
<td>
<div>1</div>
</td>
<td>
<div>2</div>
</td>
</tr>
</table>
Is there any reason you can't simply specify table { width: 100%; } instead of using table-layout: fixed; ?
html *
{
font-size: 98%;
color: #000;
font-family: Arial !important;
}
table {
width:100%;
}
th, td {
padding: 15px;
word-break: break-all;
background:#ccc;
}
https://jsfiddle.net/L05v6s8z/
Have you considered using a caption tag?
The caption element is semantically defined as the title for a table (which is what you are trying to do) and has been available since at least HTML 3.2. It is compatible with all browser versions, including IE6. You can style it with CSS to achieve the look & feel you're after.
html *
{
font-size: 98%;
color: #000;
font-family: Arial !important;
}
table {
table-layout: fixed;
}
table caption {
font-size: 300%;
}
th, td {
padding: 15px;
word-break: break-all;
}
<table style="width: 100%">
<caption>Table of Contents</caption>
<tbody>
<tr>
<td style="width: 5%;">
<div>1</div>
</td>
<td style="width: 95%;">
<div>Name</div>
</td>
</tr>
</tbody>
</table>
Related
I have made two tables, one of which does not fill the full width of the parent div.
Does anyone have a clue what's wrong? You will find below the JS fiddle code:
https://jsfiddle.net/factorbased/cps3Loa2/6
The issue seems to involve this part but I don't understand how to fix it:
<head>
<style>
table.ReturnsTable {
text-align: right;
width: 100%;
}
.tr_grey{background-color:#C0C0C0;}
.setheight{min-height: 100px; overflow: hidden;}
#pies3 div{float:left;}
#pies4 div{float:left;}
</style>
</head>
<body>
<div id="csvBar12" style="display: none;">
[wbcr_php_snippet id="972"]
</div>
<div id="pies3" class="setheight" width="100%">
<div id="chartdiv3" style="width: 500px; height: 300px; background-color: #FFFFFF;" ></div>
<div><table class="ReturnsTable" border="2">
<tr class="tr_grey"><td>Performance Statistics</td> <td>Portfolio</td> <td>Benchmark</td> <td>Difference</td> </tr>
<tr> <td>3-Month Return (%)</td> <td id="b0"></td> <td id="b1"></td><td id="b2"></td> </tr>
<tr> <td>1-Year Return (%)</td> <td id="b3"></td> <td id="b4"></td> <td id="b5"></td> </tr>
<tr> <td>3-Year Return (%)</td> <td id="b6"></td> <td id="b7"></td><td id="b8"></td></tr>
<tr> <td>5-Year Return (%)</td> <td id="b9"></td> <td id="b10"></td> <td id="b11"></td> </tr>
</table></div>
</div>
<div id="pies4" class="setheight" width="100%">
<div id="chartdiv4" style="width: 500px; height: 300px; background-color: #FFFFFF;" ></div>
<div><table class="ReturnsTable" border="2">
<tr class="tr_grey"><td>Risk Measurements</td> <td>Portfolio</td> <td>Benchmark</td> <td>Difference</td> </tr>
<tr> <td>Standard Deviation (%)</td> <td id="b12"></td> <td id="b13"></td><td id="b14" ></td> </tr>
<tr> <td>Maximum Drawdown (%)</td> <td id="b15" ></td> <td id="b16" ></td> <td id="b17"></td> </tr>
<tr> <td>Sharpe Ratio</td> <td id="b18"></td> <td id="b19"></td><td id="b20"></td></tr>
<tr> <td>Index Correlation</td> <td id="b21"></td> <td id="b22"></td> <td id="b23"></td> </tr>
</table></div>
</div>
</body>
Many thanks,
I want to create a table with stuff in it like this:
What I have right now:
<table class="table">
<td>
<tr>
<div style="width: 100px;height:100px; background-color: blue;"></div>
</tr>
<tr>
<div style="width: 100px;height:100px; background-color: red;"></div>
</tr>
</td>
<td>
<div style="width: 100px;height:200px; background-color: yellow;"></div>
</td>
</table>
Use rowspan, and td cannot be direct child of a table.
table {
border-collapse: collapse;
}
td {
width: 100px;
text-align: center;
vertical-align: middle;
}
.blue {
background-color: royalblue;
height: 100px;
}
.yellow {
background-color: yellow;
height: 200px;
}
.red {
background-color: red;
height: 100px;
}
<table>
<tr>
<td class="blue">1</td>
<td class="yellow" rowspan="2">3</td>
</tr>
<tr>
<td class="red">2</td>
</tr>
</table>
Well, firstly, your table syntax is off. It should look like this.
<table>
<tr>
<td> </td>
</tr>
</table>
Next, what you want is the first row to have two columns, with the second column taking up the space of two rows. The next row will have one column. This can be done using rowspan.
Here's your refactored code.
<table class="table">
<tr>
<td rowspan="1">
<div style="width: 100px;height:100px; background-color: blue;"></div>
</td>
<td rowspan="2">
<div style="width: 100px;height:200px; background-color: yellow;"></div>
</td>
</tr>
<tr>
<td rowspan="1">
<div style="width: 100px;height:100px; background-color: red;"></div>
</td>
</tr>
</table>
Your code must like this: use rowspan for second td
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100px;height:100px; background-color: blue;"></td>
<td rowspan="2" style="width: 100px;height:200px; background-color: yellow;"></td>
</tr>
<tr>
<td style="width: 100px;height:100px; background-color: red;"></td>
</tr>
</table>
</tr>
</table>
I have a html that when the window shrinks, the content of sub divs gets cutoff. Even though the outermost div is overflow:auto, and there is a scroll bar..
I notice that overflow:hidden is set in multiple child divs. The thing is the inner html are generated from some API and it would impractical to reset all these overflow properties.
My question is:
the height/width of these child divs are not set, why the overflow property still applies?
is there another way to prevent cutoff in child div? Like making sure the parent div has enough height?
Below is a simplified version of my html:
<div id="main" style="width: 100%; height: 100%; overflow: auto; -ms-zoom: 1;" abp="1">
<div style="box-sizing:border-box">
<div style="overflow:hidden;text-align:left">
<div id="SecListA" style="width: 100%; height: 100%; overflow: hidden; position: relative;">
<div>
<span class="ttl" id="sectKey-18-HL" style="font-size: 20px; font-weight: 600;" abp="373">Section A</span>
</div>
</div>
</div>
</div>
<div style="box-sizing:border-box">
<div style="overflow:hidden;text-align:left">
<div id="SecListB" style="width: 100%; height: 100%; overflow: hidden; position: relative;">
<div>
<span class="ttl" id="sectKey-18-HL" style="font-size: 20px; font-weight: 600;" abp="373">Section B</span>
</div>
<table class="skTbl" id="MRLTable-CVIntList280">
<thead abp="416">
<tr class="visHid colHdr" abp="417">
<th class="rIndent" abp="418"></th>
<th class="hlImp" style="width: 96%;" abp="419"></th>
<th style="width: 1%;"></th>
<th style="width: 1%;"></th>
<th style="width: 1%;"></th>
<th style="width: 1%;"></th>
</tr>
</thead>
<tbody abp="424">
<tr style="display: none;" abp="425">
<td abp="426"></td>
</tr>
<tr>
<td abp="428"></td>
<td abp="429">
<div style="padding-left: 0px; display: inline-block;" abp="430"><span class="vbIcn icn icnMan" abp="431"><img src="C:\PROGRAM FILES (X86)\Y.png" abp="432"></span></div> subtitle A
</td>
<td abp="433">
<span abp="434"></span>
</td>
<td abp="435"><span abp="436"></span></td>
<td abp="437"><span class="MRLRecFldHover" abp="438"></span></td>
<td abp="439"><span class="MRLRecFldHover" abp="440"></span></td>
</tr>
<tr title="Edit this item">
<td abp="442"></td>
<td class="hlImp titleField hlImp" abp="443"><span tabindex="0"><div style="padding-left: 20px; display: inline-block;" abp="445"><span class="vbIcn icn icnMan"><img src="C:\PROGRAM FILES (X86)\X.png"></span></div> paragrah A</span>
</td>
<td abp="448"><span></span></td>
<td abp="450"><span></span></td>
<td abp="452"><span></span></td>
<td abp="454"><span><span class="itAct" abp="456"><span title="Remove this set" style="padding: 0px 24px 16px 8px; vertical-align: top;"><span class="vbIcn icn icnDelete" abp="458"></span></span>
</span>
</span>
</td>
</tr>
<tr>
<td></td>
<td colspan="5">
<table class="skForceFitTbl skTbl" cellspacing="0" cellpadding="0" abp="462">
<tbody abp="463">
<tr class="noLn" abp="464">
<td class="skForceFitCell" abp="465">
<span abp="466">
<table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">
<tbody abp="468">
<tr abp="469">
<td style="padding-left: 40px;" abp="470"></td>
<td style="width: 100%; text-align: left;" abp="471">
<span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">
some text for the ssdfasdfdsfffffffffffffffffffffffffffffffffffffffffffffffffffff. <br>dddddd
</span>
</td>
</tr>
</tbody>
</table>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: none;" abp="425">
<td abp="426"></td>
</tr>
<tr>
<td abp="428"></td>
<td abp="429">
<div style="padding-left: 0px; display: inline-block;" abp="430"><span class="vbIcn icn icnMan" abp="431"><img src="C:\PROGRAM FILES (X86)\Y.png" abp="432"></span></div> subtitle B
</td>
<td abp="433">
<span abp="434"></span>
</td>
<td abp="435"><span abp="436"></span></td>
<td abp="437"><span class="MRLRecFldHover" abp="438"></span></td>
<td abp="439"><span class="MRLRecFldHover" abp="440"></span></td>
</tr>
<tr title="Edit this item">
<td abp="442"></td>
<td class="hlImp titleField hlImp" abp="443"><span tabindex="0"><div style="padding-left: 20px; display: inline-block;" abp="445"><span class="vbIcn icn icnMan"><img src="C:\PROGRAM FILES (X86)\X.png"></span></div> paragrah A</span>
</td>
<td abp="448"><span></span></td>
<td abp="450"><span></span></td>
<td abp="452"><span></span></td>
<td abp="454"><span><span class="itAct" abp="456"><span title="Remove this set" style="padding: 0px 24px 16px 8px; vertical-align: top;"><span class="vbIcn icn icnDelete" abp="458"></span></span>
</span>
</span>
</td>
</tr>
<tr>
<td></td>
<td colspan="5">
<table class="skForceFitTbl skTbl" cellspacing="0" cellpadding="0" abp="462">
<tbody abp="463">
<tr class="noLn" abp="464">
<td class="skForceFitCell" abp="465">
<span abp="466">
<table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">
<tbody abp="468">
<tr abp="469">
<td style="padding-left: 40px;" abp="470"></td>
<td style="width: 100%; text-align: left;" abp="471">
<span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">
some text for the testing. This text will get cutoff when the window is small enough.... <br>dddddd
</span>
</td>
</tr>
</tbody>
</table>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr title="Edit this item">
<td abp="442"></td>
<td class="hlImp titleField hlImp" abp="443"><span tabindex="0"><div style="padding-left: 20px; display: inline-block;" abp="445"><span class="vbIcn icn icnMan"><img src="C:\PROGRAM FILES (X86)\X.png"></span></div> paragrah B</span>
</td>
<td abp="448"><span></span></td>
<td abp="450"><span></span></td>
<td abp="452"><span></span></td>
<td abp="454"><span><span class="itAct" abp="456"><span title="Remove this set" style="padding: 0px 24px 16px 8px; vertical-align: top;"><span></span></span>
</span>
</span>
</td>
</tr>
<tr>
<td></td>
<td colspan="5">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<span>
<table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">
<tbody abp="468">
<tr abp="469">
<td style="padding-left: 40px;" abp="470"></td>
<td style="width: 100%; text-align: left;" abp="471">
<span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">
some text for the testing. This text will get cutoff when the window is small enough.... <br>dddddd
</span>
</td>
</tr>
</tbody>
</table>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Thats just how overflow works. If you set it to hidden on a div, any content that flows outside of its boundaries, regardless of what makes it flow outside, it gets clipped.
Ideally the proper solution would be to change the markup. However, if you really can't, you can hack it with css using !important:
#main div {
overflow: initial !important;
}
#main {
width: initial !important;
overflow: initial !important;
}
div#SecListB {
overflow: initial !important;
}
Check out a fiddle here.
This text...
some text for the ssdfasdfdsfffffffffffffffffffffffffffffffffffffffffffffffffffff.
is most likely the cause (it appears several times). It contains one extremely long "word" which forces the table-cell which is in to be extended. But that's completely unrealistic. Use real text with real word lenghts, this will change the whole scenario.
(If you don't want to type text, just google "blindtext generator" - there are pages that generate random text for you which you can copy.)
I have a HTML table whose data is coming from the database. Currently the data is getting filled from the center instead of top. Like below:-
Have a look at the below HTML
<table style="width: 100%; height: 550px; text-align: center" border="1" runat="server"
id="tbl1Details">
<colgroup>
<col width="5%" />
<col width="45%" />
</colgroup>
<tr>
<td colspan="4">
<asp:Label ID="lblpltfrm_Number" runat="server" Style="height: 20px;"></asp:Label>
</td>
</tr>
<tr>
<td align="center" style="height: 20px;">
SR.
</td>
<td align="center" style="height: 20px;">
Stop
</td>
<td align="center" style="height: 20px;">
Time
</td>
<td align="center" style="height: 20px;">
Status
</td>
</tr>
<tr>
<td id="tTime" runat="server">
<div id="list" runat="server" style="font-size: 25px;">
</div>
</td>
<td>
<table style="width: 100%">
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tr>
<td style="text-align: left">
<div id="dv_FromStop" style="font-size: 25px;" runat="server">
</div>
</td>
<td style="text-align: left">
<div id="Dv_ToStop" style="font-size: 25px;" runat="server">
</div>
</td>
</tr>
</table>
</td>
<td>
<div id="dv_Time" style="font-size: 25px;" runat="server">
</div>
</td>
<td>
<div id="dv_status" style="font-size: 25px;" runat="server">
</div>
</td>
</tr>
</table>
Use the following CSS:
table td {
vertical-align: top;
}
Or in HTML, use either:
<td valign="top">
<td style="vertical-align: top;">
The second one is preferred because, valign is deprecated.
You need to use vertical alignment.
css:
td { vertical-align:top; }
Use vertical-align: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align.
In CSS:
td { vertical-align: top; }
In HTML:
<td valign="top">...</td>
I'm trying to center the content in my body tag in a simple HTML page. I want the body to be 100% width, i have a container div inside of it with a set width, i want the container to be in the center of the screen.
I tried to set the margin to 0 auto; does not work, tried to set align="center" in the body tag, doesnt work.
Here is my page, as you can see it's not in center: http://jsbin.com/vifekivatabo/1/
What am i doing wrong?
Hey you forget to this
Define
your .container1 margin:0 auto;
.container1{
margin:0 auto;
}
Try thhis to your container class:
.container
{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.container1 {
max-width: 600px;
width: auto;
margin:0 auto;
text-align:center;
}
ADD
margin:0 auto;//to center the page
text-align:center;
Fiddle
http://jsfiddle.net/7c9wjLy6/1/
No problem with margin:0 auto;
here
.container1{
margin:0 auto;
}
Just put<center> before starting the div and </center> after closing the div.
Like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
body {
width: 100%;
font-family: Arial, Verdana;
margin: 0 auto !important;
padding: 0;
}
.container1 {
max-width: 600px;
width: auto;
}
.inner {
max-width: 60%;
width: auto;
margin: 0 auto;
}
.round {
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
margin: 0 auto 0 auto;
padding: 5px;
border: 2px solid #f4f3ee;
background: #ffffff;
}
.auto-style1 {
font-size: xx-small;
}
</style>
</head>
<body>
<center>
<div class="container1">
<img alt="l" src="~/xxx.png" />
<div id="acceptMsg" class="inner">
<b>Welcome to the xxx mobility enrollment page.</b>
<br />
<p>dasdasd</p>
<br />
<br />
<div>
#* <select name="DL_MarketChooser" id="DL_MarketChooser" style="width:40%;">
<option selected="selected" value="Choose Region">Choose Region</option>
<option value="https://connect.molnlycke.com/ssp/hq">Temporary Enrollment</option>
</select>*#
<table id="loginTable" align="center" class="registration" border="0" cellpadding="0" cellspacing="6">
<colgroup>
<col>
</colgroup>
<tbody>
<tr class="middleRow">
<td class="firstColumn">Username:</td>
<td class="secondColumn">
<input type="text" id="userID" size="11" value="">
</td>
</tr>
<tr class="middleRow">
<td class="firstColumn">Password:</td>
<td class="secondColumn">
<input type="password" id="Password" size="11" value="">
</td>
</tr>
<tr class="lastRow">
<td colspan="2">
<div class="registerButtons" align="center">
<button type="button" onclick="performAuth()" tabindex="0">Login</button>
</td>
</tr>
</tbody>
</table>
<table id="registerTable" align="center" class="registration" border="0" cellpadding="0" cellspacing="6">
<colgroup>
<col>
</colgroup>
<tbody>
<tr class="firstRow">
<td class="firstColumn"></td>
<td class="secondColumn"><span class="gwt-CheckBox">
<input type="checkbox" id="isPDA" tabindex="0"><label for="gwt-uid-1">My device has no phone number</label></span></td>
</tr>
<tr class="middleRow">
<td class="firstColumn">Country:</td>
<td class="secondColumn">
<select tabindex="0" id="countrySelect">
<option value="+46">Sweden</option>
<option value="+83">United States</option>
</select>
</td>
</tr>
<tr class="middleRow">
<td class="firstColumn"></td>
<td class="secondColumn">
<table>
<colgroup>
<col>
</colgroup>
<tbody>
<tr>
<td class="inline-label">Country<br>
Code</td>
<td class="inline-label">Prefix and Number<br>
(no space, no leading zero)</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="middleRow">
<td class="firstColumn">Mobile:</td>
<td class="mobile-cell secondColumn">
<table>
<colgroup>
<col>
</colgroup>
<tbody>
<tr>
<td>
<table cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: middle;">
<input type="text" tabindex="0" id="countryCode" size="1" disabled="" value="+46"></td>
<td align="left" style="vertical-align: top;">
<div class="errorMessage" style="display: none;">Required field</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<table cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: middle;">
<input type="text" tabindex="0" id="phoneNumber" size="11"></td>
<td align="left" style="vertical-align: top;">
<div class="errorMessage" style="display: none;">Required field</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="middleRow">
<td class="firstColumn">Platform:</td>
<td class="secondColumn">
<select tabindex="0" id="platformSelect">
<option value="no">-Select-</option>
<option value="A">Android</option>
<option value="I">iOS</option>
<option value="W">Windows Phone</option>
</select>
</td>
</tr>
<tr class="middleRow">
<td class="firstColumn"></td>
<td class="secondColumn"><span class="gwt-CheckBox">
<input type="checkbox" id="isEmp" tabindex="0" checked=""><label for="isEmp">I own this device</label></span></td>
</tr>
<tr class="lastRow">
<td colspan="2">
<div class="registerButtons" align="center">
<button type="button" onclick="performRegister()" tabindex="0" id="registerButton" disabled>Register</button>
<button type="button" tabindex="0">Clear</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<p style="text-align: center" class="auto-style1">
Application Version 1.5<br />
</div>
</center>
</body>
</html>
I've also created a CodePen and a JsFiddle for you.