CSS:
.chash, .java, .php, .jscript, .jQuery, .cplus, .python, .asp, .dotnet, .html,
.objectivec, .iOS, .sql, .css, .rubyr, .c, .xml, .AJAX, .xcode, .linux, .windows,
.vbdotnet, .json, .Apache, .wordpress, .oracle, .Perl, .ActionScript, .flash,
.dothtaccess, .VisualStudio, .GoogleAppEngine, .jsp,. PostgreSQL, .ZendFramework,
.email, .GoogleMaps {
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
margin: 10px;
padding: 5px;
width: 250px;
height: 180px;
}
td {
padding-right: 20px;
margin: 10px;
}
HTML:
<div class="Languages">
<table>
<tr>
<td class="chash"></td>
<td class="java"></td>
<td class="php"></td >
<td class="jscript"></td>
</tr>
<tr>
<td class="jQuery"></td>
<td class="Perl"></td>
<td class="dothtaccess"></td>
<td class="flash"></td>
</tr>
<tr>
<td class="cplus"></td>
<td class="python"></td >
<td class="asp"></td>
<td class="dotnet"></td>
</tr>
<tr>
<td class="html"></td>
<td class="email"></td >
<td class="GoogleMaps"></td>
<td class="ActionScript"></td>
</tr>
<tr>
<td class="objectivec"></td>
<td class="iOS"></td>
<td class="sql"></td>
<td class="ZendFramework"></td>
</tr>
<tr>
<td class="PostgreSQL"></td>
<td class="oracle"></td >
<td class="jsp"></td>
<td class="css"></td>
</tr>
<tr>
<td class="rubyr"></td >
<td class="c"></td>
<td class="xml"></td>
<td class="AJAX"></td>
</tr>
<tr>
<td class="xcode"></td>
<td class="wordpress"></td>
<td class="linux"></td>
<td class="windows"></td>
</tr>
<tr>
<td class="vbdotnet"></td>
<td class="json"></td >
<td class="Apache"></td>
<td class="GoogleAppEngine"></td>
<td class="VisualStudio"></td>
</tr>
</table>
</div>
LIVE DEMO
Here's one way to get some spacing between your table cells. View it on JSFiddle
HTML
<table>
<tr>
<td>
hi
</td>
<td>
hello
</td>
</tr>
</table>
CSS
table {
border-collapse:separate;
border-spacing:10px 10px;
}
and if you're not using HTML5:
HTML4
<table cellspacing="5">
Related
I have a table which loads the data by crating all the elements inside the table dynamically. Something similar to datatable. Now, every time I regenerate the tbody for the next page, the column width changes based on text length and it changes the table width. I tried table-layout: fixed and td {width: 1%} but they don't work. I want to keep the table column width same as the header text width. How can I achieve that?
let tbody1 = document.getElementById('t-body-1')
let tbody2 = document.getElementById('t-body-2')
setInterval(function () {
tbody1.classList.toggle('no-display');
tbody2.classList.toggle('no-display');
}, 1000)
table {
border-collapse: collapse;
-webkit-box-shadow: #e2e2e2 0 10px 20px;
-moz-box-shadow: #e2e2e2 0 10px 20px;
box-shadow: #e2e2e2 0 10px 20px;
border-radius: 10px;
overflow: hidden;
/*table-layout: fixed;*/
/*width: 934px;*/
}
.r-thead-tr-th, .r-tbody-tr-td, .r-tfoot-tr-th {
padding: 12px 25px;
text-align: left;
/*width: 1%;*/
overflow: hidden;
border-collapse: collapse;
}
.no-display {
display:none;
}
<div class="table-container" id="table-container">
<div class="r-header-controller"></div>
<table id="custom-table">
<thead class="r-thead">
<tr class="r-thead-tr">
<th class="r-thead-tr-th">Name</th>
<th class="r-thead-tr-th">Designation</th>
<th class="r-thead-tr-th">City</th>
<th class="r-thead-tr-th">Postal</th>
<th class="r-thead-tr-th">Start date</th>
<th class="r-thead-tr-th">Salary</th>
</tr>
</thead>
<tbody id="t-body-1" class="r-tbody">
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Brielle Williamson</td>
<td class="r-tbody-tr-td">Integration Specialist</td>
<td class="r-tbody-tr-td">New York</td>
<td class="r-tbody-tr-td">4804</td>
<td class="r-tbody-tr-td">2012/12/02</td>
<td class="r-tbody-tr-td">$372,000</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Herrod Chandler</td>
<td class="r-tbody-tr-td">Sales Assistant</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">9608</td>
<td class="r-tbody-tr-td">2012/08/06</td>
<td class="r-tbody-tr-td">$137,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Rhona Davidson</td>
<td class="r-tbody-tr-td">Integration Specialist</td>
<td class="r-tbody-tr-td">Tokyo</td>
<td class="r-tbody-tr-td">6200</td>
<td class="r-tbody-tr-td">2010/10/14</td>
<td class="r-tbody-tr-td">$327,900</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Colleen Hurst</td>
<td class="r-tbody-tr-td">Javascript Developer</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">2360</td>
<td class="r-tbody-tr-td">2009/09/15</td>
<td class="r-tbody-tr-td">$205,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Sonya Frost</td>
<td class="r-tbody-tr-td">Software Engineer</td>
<td class="r-tbody-tr-td">Edinburgh</td>
<td class="r-tbody-tr-td">1667</td>
<td class="r-tbody-tr-td">2008/12/13</td>
<td class="r-tbody-tr-td">$103,600</td>
</tr>
</tbody>
<tbody id="t-body-2" class="r-tbody no-display">
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Jena Gaines</td>
<td class="r-tbody-tr-td">Office Manager Office Manager</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">3814</td>
<td class="r-tbody-tr-td">2008/12/19</td>
<td class="r-tbody-tr-td">$90,560</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Quinn Flynn</td>
<td class="r-tbody-tr-td">Support Lead</td>
<td class="r-tbody-tr-td">Edinburgh</td>
<td class="r-tbody-tr-td">9497</td>
<td class="r-tbody-tr-td">2013/03/03</td>
<td class="r-tbody-tr-td">$342,000</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Charde Marshall</td>
<td class="r-tbody-tr-td">Regional Director</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">6741</td>
<td class="r-tbody-tr-td">2008/10/16</td>
<td class="r-tbody-tr-td">$470,600</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Haley Kennedy</td>
<td class="r-tbody-tr-td">Senior Marketing Designer</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">3597</td>
<td class="r-tbody-tr-td">2012/12/18</td>
<td class="r-tbody-tr-td">$313,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Tatyana Fitzpatrick</td>
<td class="r-tbody-tr-td">Regional Director</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">1965</td>
<td class="r-tbody-tr-td">2010/03/17</td>
<td class="r-tbody-tr-td">$385,750</td>
</tr>
</tbody>
<tfoot class="r-tfoot">
<tr class="r-tfoot-tr">
<th class="r-tfoot-tr-th r-text-right" colspan="5" rowspan="1">Total</th>
<th class="r-tfoot-tr-th" colspan="1" rowspan="1">$2,120,754</th>
</tr>
</tfoot>
</table>
<div class="r-footer-controller">
</div>
</div>
Need to set th to some fixed width then columns will stop resizing. Since you have 6 columns I chose width: 16.6% for each th which is 100%/6.
let tbody1 = document.getElementById('t-body-1')
let tbody2 = document.getElementById('t-body-2')
setInterval(function () {
tbody1.classList.toggle('no-display');
tbody2.classList.toggle('no-display');
}, 1000)
table {
border-collapse: collapse;
-webkit-box-shadow: #e2e2e2 0 10px 20px;
-moz-box-shadow: #e2e2e2 0 10px 20px;
box-shadow: #e2e2e2 0 10px 20px;
border-radius: 10px;
overflow: hidden;
table-layout: fixed;
width: 934px;
}
.r-thead-tr-th, .r-tbody-tr-td, .r-tfoot-tr-th {
padding: 12px 25px;
text-align: left;
/*width: 1%;*/
overflow: hidden;
border-collapse: collapse;
}
.no-display {
display:none;
}
th {
width: 16.6%;
}
<div class="table-container" id="table-container">
<div class="r-header-controller"></div>
<table id="custom-table">
<thead class="r-thead">
<tr class="r-thead-tr">
<th class="r-thead-tr-th">Name</th>
<th class="r-thead-tr-th">Designation</th>
<th class="r-thead-tr-th">City</th>
<th class="r-thead-tr-th">Postal</th>
<th class="r-thead-tr-th">Start date</th>
<th class="r-thead-tr-th">Salary</th>
</tr>
</thead>
<tbody id="t-body-1" class="r-tbody">
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Brielle Williamson</td>
<td class="r-tbody-tr-td">Integration Specialist</td>
<td class="r-tbody-tr-td">New York</td>
<td class="r-tbody-tr-td">4804</td>
<td class="r-tbody-tr-td">2012/12/02</td>
<td class="r-tbody-tr-td">$372,000</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Herrod Chandler</td>
<td class="r-tbody-tr-td">Sales Assistant</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">9608</td>
<td class="r-tbody-tr-td">2012/08/06</td>
<td class="r-tbody-tr-td">$137,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Rhona Davidson</td>
<td class="r-tbody-tr-td">Integration Specialist</td>
<td class="r-tbody-tr-td">Tokyo</td>
<td class="r-tbody-tr-td">6200</td>
<td class="r-tbody-tr-td">2010/10/14</td>
<td class="r-tbody-tr-td">$327,900</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Colleen Hurst</td>
<td class="r-tbody-tr-td">Javascript Developer</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">2360</td>
<td class="r-tbody-tr-td">2009/09/15</td>
<td class="r-tbody-tr-td">$205,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Sonya Frost</td>
<td class="r-tbody-tr-td">Software Engineer</td>
<td class="r-tbody-tr-td">Edinburgh</td>
<td class="r-tbody-tr-td">1667</td>
<td class="r-tbody-tr-td">2008/12/13</td>
<td class="r-tbody-tr-td">$103,600</td>
</tr>
</tbody>
<tbody id="t-body-2" class="r-tbody no-display">
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Jena Gaines</td>
<td class="r-tbody-tr-td">Office Manager Office Manager</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">3814</td>
<td class="r-tbody-tr-td">2008/12/19</td>
<td class="r-tbody-tr-td">$90,560</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Quinn Flynn</td>
<td class="r-tbody-tr-td">Support Lead</td>
<td class="r-tbody-tr-td">Edinburgh</td>
<td class="r-tbody-tr-td">9497</td>
<td class="r-tbody-tr-td">2013/03/03</td>
<td class="r-tbody-tr-td">$342,000</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Charde Marshall</td>
<td class="r-tbody-tr-td">Regional Director</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">6741</td>
<td class="r-tbody-tr-td">2008/10/16</td>
<td class="r-tbody-tr-td">$470,600</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Haley Kennedy</td>
<td class="r-tbody-tr-td">Senior Marketing Designer</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">3597</td>
<td class="r-tbody-tr-td">2012/12/18</td>
<td class="r-tbody-tr-td">$313,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Tatyana Fitzpatrick</td>
<td class="r-tbody-tr-td">Regional Director</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">1965</td>
<td class="r-tbody-tr-td">2010/03/17</td>
<td class="r-tbody-tr-td">$385,750</td>
</tr>
</tbody>
<tfoot class="r-tfoot">
<tr class="r-tfoot-tr">
<th class="r-tfoot-tr-th r-text-right" colspan="5" rowspan="1">Total</th>
<th class="r-tfoot-tr-th" colspan="1" rowspan="1">$2,120,754</th>
</tr>
</tfoot>
</table>
<div class="r-footer-controller">
</div>
</div>
I would comment but my reputation isn't high enough for that yet.
Anyways,
I would think that your answer lies in the fact that the width in the following code needs to be changed to a static number, not a percent.
.r-thead-tr-th, .r-tbody-tr-td, .r-tfoot-tr-th {
padding: 12px 25px;
text-align: left;
/*width: 1%;*/
overflow: hidden;
border-collapse: collapse;
}
But also, you are targeting the classes .r-thead-tr-th, .r-tbody-tr-td, .r-tfoot-tr-th which are the cells themselves. It would probably be better if you targeted .r-thead.tr and .r-tbody-tr as these are the containers for your cells. I hope this fixes your issue.
try using html 'colspan' property
I created a table inside of a card. The issue I having is that when I minimize the page, some of the html elements begin to leave the card as you can see in the image below. Can someone tell me why this may be happening? Here is a fiddle that has the html and css for this.
<div class="report-card-i text-center text-muted">
<div class="font-16 m-l-35 p-t-25 p-b-10">Top Locations</div>
<div class="m-l-15 m-r-15">
<table class="table">
<thead>
<tr class="black-cell">
<th class="font-light">#</th>
<th class="font-light"><span class="m-l-125">Location</span></th>
<th class="font-light">Shipments</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-16">1</td>
<td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
<td class="font-16">67</td>
</tr>
<tr>
<td class="font-16">1</td>
<td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
<td class="font-16">67</td>
</tr>
<tr>
<td class="font-16">1</td>
<td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
<td class="font-16">67</td>
</tr>
<tr>
<td class="font-16">1</td>
<td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
<td class="font-16">67</td>
</tr>
<tr>
<td class="font-16">1</td>
<td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
<td class="font-16">67</td>
</tr>
</tbody>
</table>
</div>
</div>
.report-card-i{
background: #fff;
box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, 0.2);
position: relative;
margin-top: 30px;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
I have an assignment to create a periodic table of elements. Using CSS, how can I make all the individual cells of table1 and table2 the same width instead of just being as wide as the text inside them? Any help would be greatly appreciated.
table.table1
{
border:none;
width:75%;
margin:auto;
}
table.table1 td
{
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size:100%;
text-align:center;
}
table.table2
{
border:none;
width:75%;
margin-left:17.8%;
margin-top:20px;
}
table.table2 td
{
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size:100%;
text-align:center;
}
table.table3
{
border:none;
width:30%;
margin:auto;
}
table.table3 td
{
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size:115%;
text-align:left;
width:15px;
}
.biggerBold
{
font-size:300%;
font-weight:bold;
}
.bigBold
{
font-size:150%;
font-weight:bold;
}
.bgGray
{
background-color:gray;
}
.bgGreen
{
background-color:green;
}
.bgYellow
{
background-color:yellow;
}
.bgPink
{
background-color:#FF99CC;
}
.bgAqua
{
background-color:aqua;
}
.bgOrange
{
background-color:#FF9933;
}
<table class="table1">
<caption class="biggerBold">The Periodic Table of Elements</caption>
<tr>
<td class="bgGray">1<br/><span class="bigBold">H</span><br/>Hydrogen<br/>1</td>
<td></td>
<td colspan="10" rowspan="3">
<table class="table3">
<caption class="bigBold">Key</caption>
<tr>
<td class="bgGray"></td>
<td>Alkali Metals</td>
</tr>
<tr>
<td class="bgGreen"></td>
<td>Alkaline Earth Metals</td>
</tr>
<tr>
<td class="bgYellow"></td>
<td>Transitional Metals</td>
</tr>
<tr>
<td class="bgPink"></td>
<td>Other Metals</td>
</tr>
<tr>
<td class="bgAqua"></td>
<td>Non Metals</td>
</tr>
<tr>
<td class="bgOrange"></td>
<td>Noble Gases</td>
</tr>
</table>
</td>
<td colspan="5"></td>
<td class="bgOrange">2<br/><span class="bigBold">He</span><br/>Helium<br/>4</td>
</tr>
<tr>
<td class="bgGray">3<br/><span class="bigBold">Li</span><br/>Lithium<br/>7</td>
<td class="bgGreen">4<br/><span class="bigBold">Be</span><br/>Beryllium<br/>9</td>
<td class="bgAqua">5<br/><span class="bigBold">B</span><br/>Boron<br/>11</td>
<td class="bgAqua">6<br/><span class="bigBold">C</span><br/>Carbon<br/>12</td>
<td class="bgAqua">7<br/><span class="bigBold">N</span><br/>Nitrogen<br/>14</td>
<td class="bgAqua">8<br/><span class="bigBold">O</span><br/>Oxygen<br/>16</td>
<td class="bgAqua">9<br/><span class="bigBold">F</span><br/>Fluorine<br/>19</td>
<td class="bgOrange">10<br/><span class="bigBold">Ne</span><br/>Neon<br/>20</td>
</tr>
<tr>
<td class="bgGray">11<br/><span class="bigBold">Na</span><br/>Sodium<br/>23</td>
<td class="bgGreen">12<br/><span class="bigBold">Mg</span><br/>Magnesium<br/>24</td>
<td class="bgPink">13<br/><span class="bigBold">Al</span><br/>Aluminum<br/>27</td>
<td class="bgAqua">14<br/><span class="bigBold">Si</span><br/>Silicon<br/>28</td>
<td class="bgAqua">15<br/><span class="bigBold">P</span><br/>Phosphorus<br/>31</td>
<td class="bgAqua">16<br/><span class="bigBold">S</span><br/>Sulfur<br/>32</td>
<td class="bgAqua">17<br/><span class="bigBold">Cl</span><br/>Chlorine<br/>35</td>
<td class="bgOrange">18<br/><span class="bigBold">Ar</span><br/>Argon<br/>40</td>
</tr>
<tr>
<td class="bgGray">19<br/><span class="bigBold">K</span><br/>Potassium<br/>39</td>
<td class="bgGreen">20<br/><span class="bigBold">Ca</span><br/>Calcium<br/>40</td>
<td class="bgYellow">21<br/><span class="bigBold">Sc</span><br/>Scandium<br/>45</td>
<td class="bgYellow">22<br/><span class="bigBold">Ti</span><br/>Titanium<br/>59</td>
<td class="bgYellow">23<br/><span class="bigBold">V</span><br/>Vanadium<br/>51</td>
<td class="bgYellow">24<br/><span class="bigBold">Cr</span><br/>Chromium<br/>52</td>
<td class="bgYellow">25<br/><span class="bigBold">Mn</span><br/>Manganese<br/>55</td>
<td class="bgYellow">26<br/><span class="bigBold">Fe</span><br/>Iron<br/>56</td>
<td class="bgYellow">27<br/><span class="bigBold">Co</span><br/>Cobalt<br/>59</td>
<td class="bgYellow">28<br/><span class="bigBold">Ni</span><br/>Nickel<br/>59</td>
<td class="bgYellow">29<br/><span class="bigBold">Cu</span><br/>Copper<br/>64</td>
<td class="bgYellow">30<br/><span class="bigBold">Zn</span><br/>Zinc<br/>65</td>
<td class="bgPink">31<br/><span class="bigBold">Ga</span><br/>Gallium<br/>70</td>
<td class="bgPink">32<br/><span class="bigBold">Ge</span><br/>Germanium<br/>73</td>
<td class="bgAqua">33<br/><span class="bigBold">As</span><br/>Arsenic<br/>75</td>
<td class="bgAqua">34<br/><span class="bigBold">Se</span><br/>Selenium<br/>79</td>
<td class="bgAqua">35<br/><span class="bigBold">Br</span><br/>Bromine<br/>80</td>
<td class="bgOrange">36<br/><span class="bigBold">Kr</span><br/>Krypton<br/>84
<tr>
<td class="bgGray">37<br/><span class="bigBold">Rb</span><br/>Rubidium<br/>85</td>
<td class="bgGreen">38<br/><span class="bigBold">Sr</span><br/>Strontium<br/>88</td>
<td class="bgYellow">39<br/><span class="bigBold">Y</span><br/>Yttrium<br/>89</td>
<td class="bgYellow">40<br/><span class="bigBold">Zr</span><br/>Zirconium<br/>91</td>
<td class="bgYellow">41<br/><span class="bigBold">Nb</span><br/>Niobium<br/>93</td>
<td class="bgYellow">42<br/><span class="bigBold">Mo</span><br/>Molybdenum<br/>96</td>
<td class="bgYellow">43<br/><span class="bigBold">Tc</span><br/>Technetium<br/>98</td>
<td class="bgYellow">44<br/><span class="bigBold">Ru</span><br/>Ruthenium<br/>101</td>
<td class="bgYellow">45<br/><span class="bigBold">Rh</span><br/>Rhodium<br/>103</td>
<td class="bgYellow">46<br/><span class="bigBold">Pd</span><br/>Palladium<br/>106</td>
<td class="bgYellow">47<br/><span class="bigBold">Ag</span><br/>Silver<br/>108</td>
<td class="bgYellow">48<br/><span class="bigBold">Cd</span><br/>Cadmium<br/>112</td>
<td class="bgPink">49<br/><span class="bigBold">In</span><br/>Indium<br/>115</td>
<td class="bgPink">50<br/><span class="bigBold">Sn</span><br/>Tin<br/>119</td>
<td class="bgPink">51<br/><span class="bigBold">Sb</span><br/>Antimony<br/>122</td>
<td class="bgAqua">52<br/><span class="bigBold">Te</span><br/>Tellurium<br/>128</td>
<td class="bgAqua">53<br/><span class="bigBold">I</span><br/>Iodine<br/>127</td>
<td class="bgOrange">54<br/><span class="bigBold">Xe</span><br/>Xenon<br/>131</td>
</tr>
<tr>
<td class="bgGray">55<br/><span class="bigBold">Cs</span><br/>Cesium<br/>133</td>
<td class="bgGreen">56<br/><span class="bigBold">Ba</span><br/>Barium<br/>137</td>
<td class=""></td>
<td class="bgYellow">72<br/><span class="bigBold">Hf</span><br/>Hafnium<br/>178</td>
<td class="bgYellow">73<br/><span class="bigBold">Ta</span><br/>Tantalum<br/>181</td>
<td class="bgYellow">74<br/><span class="bigBold">W</span><br/>Tungsten<br/>184</td>
<td class="bgYellow">75<br/><span class="bigBold">Re</span><br/>Rhenium<br/>186</td>
<td class="bgYellow">76<br/><span class="bigBold">Os</span><br/>Osmium<br/>190</td>
<td class="bgYellow">77<br/><span class="bigBold">Ir</span><br/>Iridium<br/>192</td>
<td class="bgYellow">78<br/><span class="bigBold">Pt</span><br/>Platinum<br/>195</td>
<td class="bgYellow">79<br/><span class="bigBold">Au</span><br/>Gold<br/>197</td>
<td class="bgYellow">80<br/><span class="bigBold">Hg</span><br/>Mercury<br/>201</td>
<td class="bgPink">81<br/><span class="bigBold">Tl</span><br/>Thallium<br/>204</td>
<td class="bgPink">82<br/><span class="bigBold">Pb</span><br/>Lead<br/>207</td>
<td class="bgPink">83<br/><span class="bigBold">Bi</span><br/>Bismuth<br/>209</td>
<td class="bgPink">84<br/><span class="bigBold">Po</span><br/>Polonium<br/>209</td>
<td class="bgAqua">85<br/><span class="bigBold">At</span><br/>Astatine<br/>210</td>
<td class="bgOrange">86<br/><span class="bigBold">Rn</span><br/>Radon<br/>222</td>
</tr>
<tr>
<td class="bgGray">87<br/><span class="bigBold">Fr</span><br/>Francium<br/>223</td>
<td class="bgGreen">88<br/><span class="bigBold">Ra</span><br/>Radium<br/>226</td>
<td class=""></td>
<td class="bgYellow">104<br/><span class="bigBold">Rf</span><br/>Rutherfordium<br/>263</td>
<td class="bgYellow">105<br/><span class="bigBold">Db</span><br/>Dubnium<br/>268</td>
<td class="bgYellow">106<br/><span class="bigBold">Sg</span><br/>Seaborgium<br/>271</td>
<td class="bgYellow">107<br/><span class="bigBold">Bh</span><br/>Bohrium<br/>270</td>
<td class="bgYellow">108<br/><span class="bigBold">Hs</span><br/>Hassium<br/>270</td>
<td class="bgYellow">109<br/><span class="bigBold">Mt</span><br/>Meitnerium<br/>278</td>
<td class="bgYellow">110<br/><span class="bigBold">Ds</span><br/>Darmstadtium<br/>281</td>
<td class="bgYellow">111<br/><span class="bigBold">Rg</span><br/>Roentgenium<br/>281</td>
<td class="bgYellow">112<br/><span class="bigBold">Cn</span><br/>Copernicium<br/>285</td>
<td class="bgPink">113<br/><span class="bigBold">Uut</span><br/>Ununtrium<br/>286</td>
<td class="bgPink">114<br/><span class="bigBold">Fl</span><br/>Flerovium<br/>289</td>
<td class="bgPink">115<br/><span class="bigBold">Uup</span><br/>Ununpentium<br/>289</td>
<td class="bgPink">116<br/><span class="bigBold">Lv</span><br/>Livermorium<br/>293</td>
<td class="bgAqua">117<br/><span class="bigBold">Uus</span><br/>Ununseptium<br/>294</td>
<td class="bgOrange">118<br/><span class="bigBold">Uuo</span><br/>Ununoctium<br/>294</td>
</tr>
</table>
<table class="table2">
<tr>
<td></td>
<td></td>
<td></td>
<td class="bgYellow">57<br/><span class="bigBold">La</span><br/>Lanthanum<br/>139</td>
<td class="bgYellow">58<br/><span class="bigBold">Ce</span><br/>Cerium<br/>140</td>
<td class="bgYellow">59<br/><span class="bigBold">Pr</span><br/>Praseodymium<br/>141</td>
<td class="bgYellow">60<br/><span class="bigBold">Nd</span><br/>Neodymium<br/>144</td>
<td class="bgYellow">61<br/><span class="bigBold">Pm</span><br/>Promethium<br/>145</td>
<td class="bgYellow">62<br/><span class="bigBold">Sm</span><br/>Samarium<br/>150</td>
<td class="bgYellow">63<br/><span class="bigBold">Eu</span><br/>Europium<br/>152</td>
<td class="bgYellow">64<br/><span class="bigBold">Gd</span><br/>Gadolinium<br/>157</td>
<td class="bgYellow">65<br/><span class="bigBold">Tb</span><br/>Terbium<br/>159</td>
<td class="bgYellow">66<br/><span class="bigBold">Dy</span><br/>Dysprosium<br/>163</td>
<td class="bgYellow">67<br/><span class="bigBold">Ho</span><br/>Holmium<br/>165</td>
<td class="bgYellow">68<br/><span class="bigBold">Er</span><br/>Erbium<br/>167</td>
<td class="bgYellow">69<br/><span class="bigBold">Tm</span><br/>Thulium<br/>169</td>
<td class="bgYellow">70<br/><span class="bigBold">Yb</span><br/>Ytterbium<br/>173</td>
<td class="bgYellow">71<br/><span class="bigBold">Lu</span><br/>Lutetium<br/>175</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="bgYellow">89<br/><span class="bigBold">Ac</span><br/>Actinium<br/>227</td>
<td class="bgYellow">90<br/><span class="bigBold">Th</span><br/>Thorium<br/>232</td>
<td class="bgYellow">91<br/><span class="bigBold">Pa</span><br/>Protactinium<br/>231</td>
<td class="bgYellow">92<br/><span class="bigBold">U</span><br/>Uranium<br/>238</td>
<td class="bgYellow">93<br/><span class="bigBold">Np</span><br/>Neptunium<br/>237</td>
<td class="bgYellow">94<br/><span class="bigBold">Pu</span><br/>Plutonium<br/>244</td>
<td class="bgYellow">95<br/><span class="bigBold">Am</span><br/>Americium<br/>243</td>
<td class="bgYellow">96<br/><span class="bigBold">Cm</span><br/>Curium<br/>247</td>
<td class="bgYellow">97<br/><span class="bigBold">Bk</span><br/>Berkelium<br/>247</td>
<td class="bgYellow">98<br/><span class="bigBold">Cf</span><br/>Californium<br/>251</td>
<td class="bgYellow">99<br/><span class="bigBold">Es</span><br/>Einsteinium<br/>252</td>
<td class="bgYellow">100<br/><span class="bigBold">Fm</span><br/>Fermium<br/>257</td>
<td class="bgYellow">101<br/><span class="bigBold">Md</span><br/>Mendelevium<br/>258</td>
<td class="bgYellow">102<br/><span class="bigBold">No</span><br/>Nobelium<br/>259</td>
<td class="bgYellow">103<br/><span class="bigBold">Lr</span><br/>Lawrencium<br/>262</td>
</tr>
</table>
table-layout:fixed and a min-width on body/container maybe ?
table {
table-layout:fixed;
}
body {
min-width:1620px;
}
table.table1
{
border:none;
width:100%;
margin:auto;
}
table.table1 td
{
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size:100%;
text-align:center;
}
table.table2
{
border:none;
width:100%;
margin-top:20px;
}
table.table2 td
{
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size:100%;
text-align:center;
}
table.table3
{
border:none;
width:30%;
margin:auto;
}
table.table3 td
{
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size:115%;
text-align:left;
width:15px;
}
.biggerBold
{
font-size:300%;
font-weight:bold;
}
.bigBold
{
font-size:150%;
font-weight:bold;
}
.bgGray
{
background-color:gray;
}
.bgGreen
{
background-color:green;
}
.bgYellow
{
background-color:yellow;
}
.bgPink
{
background-color:#FF99CC;
}
.bgAqua
{
background-color:aqua;
}
.bgOrange
{
background-color:#FF9933;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Periodic Table</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<table class="table1">
<caption class="biggerBold">The Periodic Table of Elements</caption>
<tr>
<td class="bgGray">1<br/><span class="bigBold">H</span><br/>Hydrogen<br/>1</td>
<td></td>
<td colspan="10" rowspan="3">
<table class="table3">
<caption class="bigBold">Key</caption>
<tr>
<td class="bgGray"></td>
<td>Alkali Metals</td>
</tr>
<tr>
<td class="bgGreen"></td>
<td>Alkaline Earth Metals</td>
</tr>
<tr>
<td class="bgYellow"></td>
<td>Transitional Metals</td>
</tr>
<tr>
<td class="bgPink"></td>
<td>Other Metals</td>
</tr>
<tr>
<td class="bgAqua"></td>
<td>Non Metals</td>
</tr>
<tr>
<td class="bgOrange"></td>
<td>Noble Gases</td>
</tr>
</table>
</td>
<td colspan="5"></td>
<td class="bgOrange">2<br/><span class="bigBold">He</span><br/>Helium<br/>4</td>
</tr>
<tr>
<td class="bgGray">3<br/><span class="bigBold">Li</span><br/>Lithium<br/>7</td>
<td class="bgGreen">4<br/><span class="bigBold">Be</span><br/>Beryllium<br/>9</td>
<td class="bgAqua">5<br/><span class="bigBold">B</span><br/>Boron<br/>11</td>
<td class="bgAqua">6<br/><span class="bigBold">C</span><br/>Carbon<br/>12</td>
<td class="bgAqua">7<br/><span class="bigBold">N</span><br/>Nitrogen<br/>14</td>
<td class="bgAqua">8<br/><span class="bigBold">O</span><br/>Oxygen<br/>16</td>
<td class="bgAqua">9<br/><span class="bigBold">F</span><br/>Fluorine<br/>19</td>
<td class="bgOrange">10<br/><span class="bigBold">Ne</span><br/>Neon<br/>20</td>
</tr>
<tr>
<td class="bgGray">11<br/><span class="bigBold">Na</span><br/>Sodium<br/>23</td>
<td class="bgGreen">12<br/><span class="bigBold">Mg</span><br/>Magnesium<br/>24</td>
<td class="bgPink">13<br/><span class="bigBold">Al</span><br/>Aluminum<br/>27</td>
<td class="bgAqua">14<br/><span class="bigBold">Si</span><br/>Silicon<br/>28</td>
<td class="bgAqua">15<br/><span class="bigBold">P</span><br/>Phosphorus<br/>31</td>
<td class="bgAqua">16<br/><span class="bigBold">S</span><br/>Sulfur<br/>32</td>
<td class="bgAqua">17<br/><span class="bigBold">Cl</span><br/>Chlorine<br/>35</td>
<td class="bgOrange">18<br/><span class="bigBold">Ar</span><br/>Argon<br/>40</td>
</tr>
<tr>
<td class="bgGray">19<br/><span class="bigBold">K</span><br/>Potassium<br/>39</td>
<td class="bgGreen">20<br/><span class="bigBold">Ca</span><br/>Calcium<br/>40</td>
<td class="bgYellow">21<br/><span class="bigBold">Sc</span><br/>Scandium<br/>45</td>
<td class="bgYellow">22<br/><span class="bigBold">Ti</span><br/>Titanium<br/>59</td>
<td class="bgYellow">23<br/><span class="bigBold">V</span><br/>Vanadium<br/>51</td>
<td class="bgYellow">24<br/><span class="bigBold">Cr</span><br/>Chromium<br/>52</td>
<td class="bgYellow">25<br/><span class="bigBold">Mn</span><br/>Manganese<br/>55</td>
<td class="bgYellow">26<br/><span class="bigBold">Fe</span><br/>Iron<br/>56</td>
<td class="bgYellow">27<br/><span class="bigBold">Co</span><br/>Cobalt<br/>59</td>
<td class="bgYellow">28<br/><span class="bigBold">Ni</span><br/>Nickel<br/>59</td>
<td class="bgYellow">29<br/><span class="bigBold">Cu</span><br/>Copper<br/>64</td>
<td class="bgYellow">30<br/><span class="bigBold">Zn</span><br/>Zinc<br/>65</td>
<td class="bgPink">31<br/><span class="bigBold">Ga</span><br/>Gallium<br/>70</td>
<td class="bgPink">32<br/><span class="bigBold">Ge</span><br/>Germanium<br/>73</td>
<td class="bgAqua">33<br/><span class="bigBold">As</span><br/>Arsenic<br/>75</td>
<td class="bgAqua">34<br/><span class="bigBold">Se</span><br/>Selenium<br/>79</td>
<td class="bgAqua">35<br/><span class="bigBold">Br</span><br/>Bromine<br/>80</td>
<td class="bgOrange">36<br/><span class="bigBold">Kr</span><br/>Krypton<br/>84
<tr>
<td class="bgGray">37<br/><span class="bigBold">Rb</span><br/>Rubidium<br/>85</td>
<td class="bgGreen">38<br/><span class="bigBold">Sr</span><br/>Strontium<br/>88</td>
<td class="bgYellow">39<br/><span class="bigBold">Y</span><br/>Yttrium<br/>89</td>
<td class="bgYellow">40<br/><span class="bigBold">Zr</span><br/>Zirconium<br/>91</td>
<td class="bgYellow">41<br/><span class="bigBold">Nb</span><br/>Niobium<br/>93</td>
<td class="bgYellow">42<br/><span class="bigBold">Mo</span><br/>Molybdenum<br/>96</td>
<td class="bgYellow">43<br/><span class="bigBold">Tc</span><br/>Technetium<br/>98</td>
<td class="bgYellow">44<br/><span class="bigBold">Ru</span><br/>Ruthenium<br/>101</td>
<td class="bgYellow">45<br/><span class="bigBold">Rh</span><br/>Rhodium<br/>103</td>
<td class="bgYellow">46<br/><span class="bigBold">Pd</span><br/>Palladium<br/>106</td>
<td class="bgYellow">47<br/><span class="bigBold">Ag</span><br/>Silver<br/>108</td>
<td class="bgYellow">48<br/><span class="bigBold">Cd</span><br/>Cadmium<br/>112</td>
<td class="bgPink">49<br/><span class="bigBold">In</span><br/>Indium<br/>115</td>
<td class="bgPink">50<br/><span class="bigBold">Sn</span><br/>Tin<br/>119</td>
<td class="bgPink">51<br/><span class="bigBold">Sb</span><br/>Antimony<br/>122</td>
<td class="bgAqua">52<br/><span class="bigBold">Te</span><br/>Tellurium<br/>128</td>
<td class="bgAqua">53<br/><span class="bigBold">I</span><br/>Iodine<br/>127</td>
<td class="bgOrange">54<br/><span class="bigBold">Xe</span><br/>Xenon<br/>131</td>
</tr>
<tr>
<td class="bgGray">55<br/><span class="bigBold">Cs</span><br/>Cesium<br/>133</td>
<td class="bgGreen">56<br/><span class="bigBold">Ba</span><br/>Barium<br/>137</td>
<td class=""></td>
<td class="bgYellow">72<br/><span class="bigBold">Hf</span><br/>Hafnium<br/>178</td>
<td class="bgYellow">73<br/><span class="bigBold">Ta</span><br/>Tantalum<br/>181</td>
<td class="bgYellow">74<br/><span class="bigBold">W</span><br/>Tungsten<br/>184</td>
<td class="bgYellow">75<br/><span class="bigBold">Re</span><br/>Rhenium<br/>186</td>
<td class="bgYellow">76<br/><span class="bigBold">Os</span><br/>Osmium<br/>190</td>
<td class="bgYellow">77<br/><span class="bigBold">Ir</span><br/>Iridium<br/>192</td>
<td class="bgYellow">78<br/><span class="bigBold">Pt</span><br/>Platinum<br/>195</td>
<td class="bgYellow">79<br/><span class="bigBold">Au</span><br/>Gold<br/>197</td>
<td class="bgYellow">80<br/><span class="bigBold">Hg</span><br/>Mercury<br/>201</td>
<td class="bgPink">81<br/><span class="bigBold">Tl</span><br/>Thallium<br/>204</td>
<td class="bgPink">82<br/><span class="bigBold">Pb</span><br/>Lead<br/>207</td>
<td class="bgPink">83<br/><span class="bigBold">Bi</span><br/>Bismuth<br/>209</td>
<td class="bgPink">84<br/><span class="bigBold">Po</span><br/>Polonium<br/>209</td>
<td class="bgAqua">85<br/><span class="bigBold">At</span><br/>Astatine<br/>210</td>
<td class="bgOrange">86<br/><span class="bigBold">Rn</span><br/>Radon<br/>222</td>
</tr>
<tr>
<td class="bgGray">87<br/><span class="bigBold">Fr</span><br/>Francium<br/>223</td>
<td class="bgGreen">88<br/><span class="bigBold">Ra</span><br/>Radium<br/>226</td>
<td class=""></td>
<td class="bgYellow">104<br/><span class="bigBold">Rf</span><br/>Rutherfordium<br/>263</td>
<td class="bgYellow">105<br/><span class="bigBold">Db</span><br/>Dubnium<br/>268</td>
<td class="bgYellow">106<br/><span class="bigBold">Sg</span><br/>Seaborgium<br/>271</td>
<td class="bgYellow">107<br/><span class="bigBold">Bh</span><br/>Bohrium<br/>270</td>
<td class="bgYellow">108<br/><span class="bigBold">Hs</span><br/>Hassium<br/>270</td>
<td class="bgYellow">109<br/><span class="bigBold">Mt</span><br/>Meitnerium<br/>278</td>
<td class="bgYellow">110<br/><span class="bigBold">Ds</span><br/>Darmstadtium<br/>281</td>
<td class="bgYellow">111<br/><span class="bigBold">Rg</span><br/>Roentgenium<br/>281</td>
<td class="bgYellow">112<br/><span class="bigBold">Cn</span><br/>Copernicium<br/>285</td>
<td class="bgPink">113<br/><span class="bigBold">Uut</span><br/>Ununtrium<br/>286</td>
<td class="bgPink">114<br/><span class="bigBold">Fl</span><br/>Flerovium<br/>289</td>
<td class="bgPink">115<br/><span class="bigBold">Uup</span><br/>Ununpentium<br/>289</td>
<td class="bgPink">116<br/><span class="bigBold">Lv</span><br/>Livermorium<br/>293</td>
<td class="bgAqua">117<br/><span class="bigBold">Uus</span><br/>Ununseptium<br/>294</td>
<td class="bgOrange">118<br/><span class="bigBold">Uuo</span><br/>Ununoctium<br/>294</td>
</tr>
</table>
<table class="table2">
<tr>
<td></td>
<td></td>
<td></td>
<td class="bgYellow">57<br/><span class="bigBold">La</span><br/>Lanthanum<br/>139</td>
<td class="bgYellow">58<br/><span class="bigBold">Ce</span><br/>Cerium<br/>140</td>
<td class="bgYellow">59<br/><span class="bigBold">Pr</span><br/>Praseodymium<br/>141</td>
<td class="bgYellow">60<br/><span class="bigBold">Nd</span><br/>Neodymium<br/>144</td>
<td class="bgYellow">61<br/><span class="bigBold">Pm</span><br/>Promethium<br/>145</td>
<td class="bgYellow">62<br/><span class="bigBold">Sm</span><br/>Samarium<br/>150</td>
<td class="bgYellow">63<br/><span class="bigBold">Eu</span><br/>Europium<br/>152</td>
<td class="bgYellow">64<br/><span class="bigBold">Gd</span><br/>Gadolinium<br/>157</td>
<td class="bgYellow">65<br/><span class="bigBold">Tb</span><br/>Terbium<br/>159</td>
<td class="bgYellow">66<br/><span class="bigBold">Dy</span><br/>Dysprosium<br/>163</td>
<td class="bgYellow">67<br/><span class="bigBold">Ho</span><br/>Holmium<br/>165</td>
<td class="bgYellow">68<br/><span class="bigBold">Er</span><br/>Erbium<br/>167</td>
<td class="bgYellow">69<br/><span class="bigBold">Tm</span><br/>Thulium<br/>169</td>
<td class="bgYellow">70<br/><span class="bigBold">Yb</span><br/>Ytterbium<br/>173</td>
<td class="bgYellow">71<br/><span class="bigBold">Lu</span><br/>Lutetium<br/>175</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="bgYellow">89<br/><span class="bigBold">Ac</span><br/>Actinium<br/>227</td>
<td class="bgYellow">90<br/><span class="bigBold">Th</span><br/>Thorium<br/>232</td>
<td class="bgYellow">91<br/><span class="bigBold">Pa</span><br/>Protactinium<br/>231</td>
<td class="bgYellow">92<br/><span class="bigBold">U</span><br/>Uranium<br/>238</td>
<td class="bgYellow">93<br/><span class="bigBold">Np</span><br/>Neptunium<br/>237</td>
<td class="bgYellow">94<br/><span class="bigBold">Pu</span><br/>Plutonium<br/>244</td>
<td class="bgYellow">95<br/><span class="bigBold">Am</span><br/>Americium<br/>243</td>
<td class="bgYellow">96<br/><span class="bigBold">Cm</span><br/>Curium<br/>247</td>
<td class="bgYellow">97<br/><span class="bigBold">Bk</span><br/>Berkelium<br/>247</td>
<td class="bgYellow">98<br/><span class="bigBold">Cf</span><br/>Californium<br/>251</td>
<td class="bgYellow">99<br/><span class="bigBold">Es</span><br/>Einsteinium<br/>252</td>
<td class="bgYellow">100<br/><span class="bigBold">Fm</span><br/>Fermium<br/>257</td>
<td class="bgYellow">101<br/><span class="bigBold">Md</span><br/>Mendelevium<br/>258</td>
<td class="bgYellow">102<br/><span class="bigBold">No</span><br/>Nobelium<br/>259</td>
<td class="bgYellow">103<br/><span class="bigBold">Lr</span><br/>Lawrencium<br/>262</td>
</tr>
</table>
</body>
</html>
or table-layout:fixed and font-size in vw value ?
table {
table-layout:fixed;
}
body {
font-size:1vw;
}
table.table1
{
border:none;
width:100%;
margin:auto;
}
table.table1 td
{
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size:100%;
text-align:center;
}
table.table2
{
border:none;
width:100%;
margin-top:20px;
}
table.table2 td
{
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size:100%;
text-align:center;
}
table.table3
{
border:none;
width:30%;
margin:auto;
}
table.table3 td
{
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size:115%;
text-align:left;
width:15px;
}
.biggerBold
{
font-size:300%;
font-weight:bold;
}
.bigBold
{
font-size:150%;
font-weight:bold;
}
.bgGray
{
background-color:gray;
}
.bgGreen
{
background-color:green;
}
.bgYellow
{
background-color:yellow;
}
.bgPink
{
background-color:#FF99CC;
}
.bgAqua
{
background-color:aqua;
}
.bgOrange
{
background-color:#FF9933;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Periodic Table</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<table class="table1">
<caption class="biggerBold">The Periodic Table of Elements</caption>
<tr>
<td class="bgGray">1<br/><span class="bigBold">H</span><br/>Hydrogen<br/>1</td>
<td></td>
<td colspan="10" rowspan="3">
<table class="table3">
<caption class="bigBold">Key</caption>
<tr>
<td class="bgGray"></td>
<td>Alkali Metals</td>
</tr>
<tr>
<td class="bgGreen"></td>
<td>Alkaline Earth Metals</td>
</tr>
<tr>
<td class="bgYellow"></td>
<td>Transitional Metals</td>
</tr>
<tr>
<td class="bgPink"></td>
<td>Other Metals</td>
</tr>
<tr>
<td class="bgAqua"></td>
<td>Non Metals</td>
</tr>
<tr>
<td class="bgOrange"></td>
<td>Noble Gases</td>
</tr>
</table>
</td>
<td colspan="5"></td>
<td class="bgOrange">2<br/><span class="bigBold">He</span><br/>Helium<br/>4</td>
</tr>
<tr>
<td class="bgGray">3<br/><span class="bigBold">Li</span><br/>Lithium<br/>7</td>
<td class="bgGreen">4<br/><span class="bigBold">Be</span><br/>Beryllium<br/>9</td>
<td class="bgAqua">5<br/><span class="bigBold">B</span><br/>Boron<br/>11</td>
<td class="bgAqua">6<br/><span class="bigBold">C</span><br/>Carbon<br/>12</td>
<td class="bgAqua">7<br/><span class="bigBold">N</span><br/>Nitrogen<br/>14</td>
<td class="bgAqua">8<br/><span class="bigBold">O</span><br/>Oxygen<br/>16</td>
<td class="bgAqua">9<br/><span class="bigBold">F</span><br/>Fluorine<br/>19</td>
<td class="bgOrange">10<br/><span class="bigBold">Ne</span><br/>Neon<br/>20</td>
</tr>
<tr>
<td class="bgGray">11<br/><span class="bigBold">Na</span><br/>Sodium<br/>23</td>
<td class="bgGreen">12<br/><span class="bigBold">Mg</span><br/>Magnesium<br/>24</td>
<td class="bgPink">13<br/><span class="bigBold">Al</span><br/>Aluminum<br/>27</td>
<td class="bgAqua">14<br/><span class="bigBold">Si</span><br/>Silicon<br/>28</td>
<td class="bgAqua">15<br/><span class="bigBold">P</span><br/>Phosphorus<br/>31</td>
<td class="bgAqua">16<br/><span class="bigBold">S</span><br/>Sulfur<br/>32</td>
<td class="bgAqua">17<br/><span class="bigBold">Cl</span><br/>Chlorine<br/>35</td>
<td class="bgOrange">18<br/><span class="bigBold">Ar</span><br/>Argon<br/>40</td>
</tr>
<tr>
<td class="bgGray">19<br/><span class="bigBold">K</span><br/>Potassium<br/>39</td>
<td class="bgGreen">20<br/><span class="bigBold">Ca</span><br/>Calcium<br/>40</td>
<td class="bgYellow">21<br/><span class="bigBold">Sc</span><br/>Scandium<br/>45</td>
<td class="bgYellow">22<br/><span class="bigBold">Ti</span><br/>Titanium<br/>59</td>
<td class="bgYellow">23<br/><span class="bigBold">V</span><br/>Vanadium<br/>51</td>
<td class="bgYellow">24<br/><span class="bigBold">Cr</span><br/>Chromium<br/>52</td>
<td class="bgYellow">25<br/><span class="bigBold">Mn</span><br/>Manganese<br/>55</td>
<td class="bgYellow">26<br/><span class="bigBold">Fe</span><br/>Iron<br/>56</td>
<td class="bgYellow">27<br/><span class="bigBold">Co</span><br/>Cobalt<br/>59</td>
<td class="bgYellow">28<br/><span class="bigBold">Ni</span><br/>Nickel<br/>59</td>
<td class="bgYellow">29<br/><span class="bigBold">Cu</span><br/>Copper<br/>64</td>
<td class="bgYellow">30<br/><span class="bigBold">Zn</span><br/>Zinc<br/>65</td>
<td class="bgPink">31<br/><span class="bigBold">Ga</span><br/>Gallium<br/>70</td>
<td class="bgPink">32<br/><span class="bigBold">Ge</span><br/>Germanium<br/>73</td>
<td class="bgAqua">33<br/><span class="bigBold">As</span><br/>Arsenic<br/>75</td>
<td class="bgAqua">34<br/><span class="bigBold">Se</span><br/>Selenium<br/>79</td>
<td class="bgAqua">35<br/><span class="bigBold">Br</span><br/>Bromine<br/>80</td>
<td class="bgOrange">36<br/><span class="bigBold">Kr</span><br/>Krypton<br/>84
<tr>
<td class="bgGray">37<br/><span class="bigBold">Rb</span><br/>Rubidium<br/>85</td>
<td class="bgGreen">38<br/><span class="bigBold">Sr</span><br/>Strontium<br/>88</td>
<td class="bgYellow">39<br/><span class="bigBold">Y</span><br/>Yttrium<br/>89</td>
<td class="bgYellow">40<br/><span class="bigBold">Zr</span><br/>Zirconium<br/>91</td>
<td class="bgYellow">41<br/><span class="bigBold">Nb</span><br/>Niobium<br/>93</td>
<td class="bgYellow">42<br/><span class="bigBold">Mo</span><br/>Molybdenum<br/>96</td>
<td class="bgYellow">43<br/><span class="bigBold">Tc</span><br/>Technetium<br/>98</td>
<td class="bgYellow">44<br/><span class="bigBold">Ru</span><br/>Ruthenium<br/>101</td>
<td class="bgYellow">45<br/><span class="bigBold">Rh</span><br/>Rhodium<br/>103</td>
<td class="bgYellow">46<br/><span class="bigBold">Pd</span><br/>Palladium<br/>106</td>
<td class="bgYellow">47<br/><span class="bigBold">Ag</span><br/>Silver<br/>108</td>
<td class="bgYellow">48<br/><span class="bigBold">Cd</span><br/>Cadmium<br/>112</td>
<td class="bgPink">49<br/><span class="bigBold">In</span><br/>Indium<br/>115</td>
<td class="bgPink">50<br/><span class="bigBold">Sn</span><br/>Tin<br/>119</td>
<td class="bgPink">51<br/><span class="bigBold">Sb</span><br/>Antimony<br/>122</td>
<td class="bgAqua">52<br/><span class="bigBold">Te</span><br/>Tellurium<br/>128</td>
<td class="bgAqua">53<br/><span class="bigBold">I</span><br/>Iodine<br/>127</td>
<td class="bgOrange">54<br/><span class="bigBold">Xe</span><br/>Xenon<br/>131</td>
</tr>
<tr>
<td class="bgGray">55<br/><span class="bigBold">Cs</span><br/>Cesium<br/>133</td>
<td class="bgGreen">56<br/><span class="bigBold">Ba</span><br/>Barium<br/>137</td>
<td class=""></td>
<td class="bgYellow">72<br/><span class="bigBold">Hf</span><br/>Hafnium<br/>178</td>
<td class="bgYellow">73<br/><span class="bigBold">Ta</span><br/>Tantalum<br/>181</td>
<td class="bgYellow">74<br/><span class="bigBold">W</span><br/>Tungsten<br/>184</td>
<td class="bgYellow">75<br/><span class="bigBold">Re</span><br/>Rhenium<br/>186</td>
<td class="bgYellow">76<br/><span class="bigBold">Os</span><br/>Osmium<br/>190</td>
<td class="bgYellow">77<br/><span class="bigBold">Ir</span><br/>Iridium<br/>192</td>
<td class="bgYellow">78<br/><span class="bigBold">Pt</span><br/>Platinum<br/>195</td>
<td class="bgYellow">79<br/><span class="bigBold">Au</span><br/>Gold<br/>197</td>
<td class="bgYellow">80<br/><span class="bigBold">Hg</span><br/>Mercury<br/>201</td>
<td class="bgPink">81<br/><span class="bigBold">Tl</span><br/>Thallium<br/>204</td>
<td class="bgPink">82<br/><span class="bigBold">Pb</span><br/>Lead<br/>207</td>
<td class="bgPink">83<br/><span class="bigBold">Bi</span><br/>Bismuth<br/>209</td>
<td class="bgPink">84<br/><span class="bigBold">Po</span><br/>Polonium<br/>209</td>
<td class="bgAqua">85<br/><span class="bigBold">At</span><br/>Astatine<br/>210</td>
<td class="bgOrange">86<br/><span class="bigBold">Rn</span><br/>Radon<br/>222</td>
</tr>
<tr>
<td class="bgGray">87<br/><span class="bigBold">Fr</span><br/>Francium<br/>223</td>
<td class="bgGreen">88<br/><span class="bigBold">Ra</span><br/>Radium<br/>226</td>
<td class=""></td>
<td class="bgYellow">104<br/><span class="bigBold">Rf</span><br/>Rutherfordium<br/>263</td>
<td class="bgYellow">105<br/><span class="bigBold">Db</span><br/>Dubnium<br/>268</td>
<td class="bgYellow">106<br/><span class="bigBold">Sg</span><br/>Seaborgium<br/>271</td>
<td class="bgYellow">107<br/><span class="bigBold">Bh</span><br/>Bohrium<br/>270</td>
<td class="bgYellow">108<br/><span class="bigBold">Hs</span><br/>Hassium<br/>270</td>
<td class="bgYellow">109<br/><span class="bigBold">Mt</span><br/>Meitnerium<br/>278</td>
<td class="bgYellow">110<br/><span class="bigBold">Ds</span><br/>Darmstadtium<br/>281</td>
<td class="bgYellow">111<br/><span class="bigBold">Rg</span><br/>Roentgenium<br/>281</td>
<td class="bgYellow">112<br/><span class="bigBold">Cn</span><br/>Copernicium<br/>285</td>
<td class="bgPink">113<br/><span class="bigBold">Uut</span><br/>Ununtrium<br/>286</td>
<td class="bgPink">114<br/><span class="bigBold">Fl</span><br/>Flerovium<br/>289</td>
<td class="bgPink">115<br/><span class="bigBold">Uup</span><br/>Ununpentium<br/>289</td>
<td class="bgPink">116<br/><span class="bigBold">Lv</span><br/>Livermorium<br/>293</td>
<td class="bgAqua">117<br/><span class="bigBold">Uus</span><br/>Ununseptium<br/>294</td>
<td class="bgOrange">118<br/><span class="bigBold">Uuo</span><br/>Ununoctium<br/>294</td>
</tr>
</table>
<table class="table2">
<tr>
<td></td>
<td></td>
<td></td>
<td class="bgYellow">57<br/><span class="bigBold">La</span><br/>Lanthanum<br/>139</td>
<td class="bgYellow">58<br/><span class="bigBold">Ce</span><br/>Cerium<br/>140</td>
<td class="bgYellow">59<br/><span class="bigBold">Pr</span><br/>Praseodymium<br/>141</td>
<td class="bgYellow">60<br/><span class="bigBold">Nd</span><br/>Neodymium<br/>144</td>
<td class="bgYellow">61<br/><span class="bigBold">Pm</span><br/>Promethium<br/>145</td>
<td class="bgYellow">62<br/><span class="bigBold">Sm</span><br/>Samarium<br/>150</td>
<td class="bgYellow">63<br/><span class="bigBold">Eu</span><br/>Europium<br/>152</td>
<td class="bgYellow">64<br/><span class="bigBold">Gd</span><br/>Gadolinium<br/>157</td>
<td class="bgYellow">65<br/><span class="bigBold">Tb</span><br/>Terbium<br/>159</td>
<td class="bgYellow">66<br/><span class="bigBold">Dy</span><br/>Dysprosium<br/>163</td>
<td class="bgYellow">67<br/><span class="bigBold">Ho</span><br/>Holmium<br/>165</td>
<td class="bgYellow">68<br/><span class="bigBold">Er</span><br/>Erbium<br/>167</td>
<td class="bgYellow">69<br/><span class="bigBold">Tm</span><br/>Thulium<br/>169</td>
<td class="bgYellow">70<br/><span class="bigBold">Yb</span><br/>Ytterbium<br/>173</td>
<td class="bgYellow">71<br/><span class="bigBold">Lu</span><br/>Lutetium<br/>175</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="bgYellow">89<br/><span class="bigBold">Ac</span><br/>Actinium<br/>227</td>
<td class="bgYellow">90<br/><span class="bigBold">Th</span><br/>Thorium<br/>232</td>
<td class="bgYellow">91<br/><span class="bigBold">Pa</span><br/>Protactinium<br/>231</td>
<td class="bgYellow">92<br/><span class="bigBold">U</span><br/>Uranium<br/>238</td>
<td class="bgYellow">93<br/><span class="bigBold">Np</span><br/>Neptunium<br/>237</td>
<td class="bgYellow">94<br/><span class="bigBold">Pu</span><br/>Plutonium<br/>244</td>
<td class="bgYellow">95<br/><span class="bigBold">Am</span><br/>Americium<br/>243</td>
<td class="bgYellow">96<br/><span class="bigBold">Cm</span><br/>Curium<br/>247</td>
<td class="bgYellow">97<br/><span class="bigBold">Bk</span><br/>Berkelium<br/>247</td>
<td class="bgYellow">98<br/><span class="bigBold">Cf</span><br/>Californium<br/>251</td>
<td class="bgYellow">99<br/><span class="bigBold">Es</span><br/>Einsteinium<br/>252</td>
<td class="bgYellow">100<br/><span class="bigBold">Fm</span><br/>Fermium<br/>257</td>
<td class="bgYellow">101<br/><span class="bigBold">Md</span><br/>Mendelevium<br/>258</td>
<td class="bgYellow">102<br/><span class="bigBold">No</span><br/>Nobelium<br/>259</td>
<td class="bgYellow">103<br/><span class="bigBold">Lr</span><br/>Lawrencium<br/>262</td>
</tr>
</table>
</body>
</html>
Specify a width, max-width, and min-width for the table cells, with the same value for all three properties.
Set a width on the td element.
td { width:30px}
This will give the cells the specified width.
To target table classes you can do this
.yourClass td {width:30px}
JSFiddle
I tried every way I could think of to clear this gap but still without success. I also tried to set padding = 0 but the gap's still there too. If i zoom out, the gap will disapper, can't figure out why!
This is the css for the last td tag (the blue rows which creates the gap) :
.tdtieudecuoi{
text-align:left;
background-color: #80A5CE;
color: #FFF;
font-weight: bold;
padding:0;
}
In your thkqgiai element add the border-top attribute as follows...
.thkqgiai{
width:20% !important;
text-align:center;
color:white;
background-color: #910000;
border-top:1px solid #910000;
}
And in the TD attributes add the following to border attributes...
border-bottom:1px solid #80A5CE;
border-right:1px solid #80A5CE;
Instead of line-height you can use height:
body {
padding: 0;
}
table,
th,
td,
tr {
border-collapse: collapse;
}
.tb {
width: 500px;
}
.tb td {
/*line-height: 25px;remove line height*/
font-size: 13px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
height: 25px;/*add height*/
}
.tb th {
padding: 5px;/*increase padding to 5px*/
}
/*2 cell đầu tiên, xác định độ rộng*/
.tdkq,
.tddd {
padding: 0;
}
.tdkq {
width: 70%;
vertical-align: top;
}
.tddd {
width: 30%;
vertical-align: top;
}
/*bảng kết quả và đầu đuôi*/
.tbkq {
width: 100%;
word-wrap: break-word;
table-layout: fixed;
float: left;
margin-bottom: 0;
padding-bottom: 0;
border-right: 1px solid #CCC;
}
.tbdd {
width: 100%;
}
.tbdd td {
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
}
/*cột giải và kết quả của bảng kết quả*/
.trkq {
width: 100%;
}
.thkqgiai {
width: 20% !important;
text-align: center;
color: white;
background-color: #910000;
}
.thkqso {
width: 80% !important;
color: #CC3F51;
font-weight: bold;
font-size: 16px;
text-align: center !important;
background-color: #FFF;
}
.tdkqgiai {
text-align: center;
background-color: #F9F9F9;
color: #910000;
}
.tdkqgiaidb {
text-align: center;
color: white;
background-color: #910000;
}
.tdkqso {
text-align: center;
word-wrap: break-word !important;
border-top: 1px solid #CCC;
}
.tdkqsodb {
text-align: center;
word-wrap: break-word !important;
color: red;
border-top: 1px solid #CCC;
}
/*cột đầu và đuôi của bảng đầu đuôi*/
.thdddau {
width: 30%;
color: white;
background-color: #910000;
}
.thddduoi {
width: 70%;
color: white;
background-color: #910000;
}
/*tiêu đề cho bảng kq*/
.tieudemien {
line-height: 24px;
background-color: #80A5CE;
text-transform: uppercase;
color: #FFF;
font-weight: bold;
font-size: 12px;
width: 500px;
margin-bottom: 0;
padding-bottom: 0;
}
.tdtieudecuoi {
text-align: left;
background-color: #80A5CE;
color: #FFF;
font-weight: bold;
padding: 0;
}
<div id="body_content">
<br />
<h2 class="tieudemien"> Kết quả xổ số Miền Nam ngày 02-11-2014 (Chủ nhật)</h2>
<table class="tb">
<tbody>
<tr>
<td class="tdkq">
<table class="tbkq">
<tbody>
<tr class="trkq">
<th class="thkqgiai">Giải</th>
<th class="thkqso">Kiên Giang</th>
</tr>
<tr>
<td class="tdkqgiai">Đặc biệt</td>
<td class="tdkqsodb">048674</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhất</td>
<td class="tdkqso">38463</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhì</td>
<td class="tdkqso">37309</td>
</tr>
<tr>
<td class="tdkqgiai">Giải ba</td>
<td class="tdkqso">20091-22416</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bốn</td>
<td class="tdkqso">28539-63139-58063-48935-41701-02723-41398</td>
</tr>
<tr>
<td class="tdkqgiai">Giải năm</td>
<td class="tdkqso">1102</td>
</tr>
<tr>
<td class="tdkqgiai">Giải sáu</td>
<td class="tdkqso">5373-2976-4875</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bảy</td>
<td class="tdkqso">551</td>
</tr>
<tr>
<td class="tdkqgiai">Giải tám</td>
<td class="tdkqso">50</td>
</tr>
<tr>
<td class="tdtieudecuoi"></td>
<td class="tdtieudecuoi">Xem kết quả trực tiếp tại iKetqua.net</td>
</tr>
</tbody>
</table>
</td>
<td class="tddd">
<table class="tbdd">
<tbody>
<tr class="trkq">
<th class="thdddau">Đầu</th>
<th class="thddduoi">Đuôi</th>
</tr>
<tr>
<td class="tdkqgiai">0</td>
<td class="tdkqso">9,1,2</td>
</tr>
<tr>
<td class="tdkqgiai">1</td>
<td class="tdkqso">6</td>
</tr>
<tr>
<td class="tdkqgiai">2</td>
<td class="tdkqso">3</td>
</tr>
<tr>
<td class="tdkqgiai">3</td>
<td class="tdkqso">9,9,5</td>
</tr>
<tr>
<td class="tdkqgiai">4</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">5</td>
<td class="tdkqso">1,0</td>
</tr>
<tr>
<td class="tdkqgiai">6</td>
<td class="tdkqso">3,3</td>
</tr>
<tr>
<td class="tdkqgiai">7</td>
<td class="tdkqso">4,3,6,5</td>
</tr>
<tr>
<td class="tdkqgiai">8</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">9</td>
<td class="tdkqso">1,8</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="tb">
<tbody>
<tr>
<td class="tdkq">
<table class="tbkq">
<tbody>
<tr class="trkq">
<th class="thkqgiai">Giải</th>
<th class="thkqso">Lâm Đồng</th>
</tr>
<tr>
<td class="tdkqgiai">Đặc biệt</td>
<td class="tdkqsodb">090431</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhất</td>
<td class="tdkqso">54958</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhì</td>
<td class="tdkqso">64035</td>
</tr>
<tr>
<td class="tdkqgiai">Giải ba</td>
<td class="tdkqso">24934-62958</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bốn</td>
<td class="tdkqso">93752-22930-27309-04977-91008-21818-94007</td>
</tr>
<tr>
<td class="tdkqgiai">Giải năm</td>
<td class="tdkqso">2336</td>
</tr>
<tr>
<td class="tdkqgiai">Giải sáu</td>
<td class="tdkqso">0075-8638-4023</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bảy</td>
<td class="tdkqso">204</td>
</tr>
<tr>
<td class="tdkqgiai">Giải tám</td>
<td class="tdkqso">61</td>
</tr>
<tr>
<td class="tdtieudecuoi"></td>
<td class="tdtieudecuoi">Xem kết quả trực tiếp tại iKetqua.net</td>
</tr>
</tbody>
</table>
</td>
<td class="tddd">
<table class="tbdd">
<tbody>
<tr class="trkq">
<th class="thdddau">Đầu</th>
<th class="thddduoi">Đuôi</th>
</tr>
<tr>
<td class="tdkqgiai">0</td>
<td class="tdkqso">9,8,7,4</td>
</tr>
<tr>
<td class="tdkqgiai">1</td>
<td class="tdkqso">8</td>
</tr>
<tr>
<td class="tdkqgiai">2</td>
<td class="tdkqso">3</td>
</tr>
<tr>
<td class="tdkqgiai">3</td>
<td class="tdkqso">1,5,4,0,6,8</td>
</tr>
<tr>
<td class="tdkqgiai">4</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">5</td>
<td class="tdkqso">8,8,2</td>
</tr>
<tr>
<td class="tdkqgiai">6</td>
<td class="tdkqso">1</td>
</tr>
<tr>
<td class="tdkqgiai">7</td>
<td class="tdkqso">7,5</td>
</tr>
<tr>
<td class="tdkqgiai">8</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">9</td>
<td class="tdkqso"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="tb">
<tbody>
<tr>
<td class="tdkq">
<table class="tbkq">
<tbody>
<tr class="trkq">
<th class="thkqgiai">Giải</th>
<th class="thkqso">Tiền Giang</th>
</tr>
<tr>
<td class="tdkqgiai">Đặc biệt</td>
<td class="tdkqsodb">545150</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhất</td>
<td class="tdkqso">78387</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhì</td>
<td class="tdkqso">06256</td>
</tr>
<tr>
<td class="tdkqgiai">Giải ba</td>
<td class="tdkqso">39415-15189</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bốn</td>
<td class="tdkqso">90260-01471-58016-40732-68891-50834-93561</td>
</tr>
<tr>
<td class="tdkqgiai">Giải năm</td>
<td class="tdkqso">3390</td>
</tr>
<tr>
<td class="tdkqgiai">Giải sáu</td>
<td class="tdkqso">1556-3656-4176</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bảy</td>
<td class="tdkqso">016</td>
</tr>
<tr>
<td class="tdkqgiai">Giải tám</td>
<td class="tdkqso">23</td>
</tr>
<tr>
<td class="tdtieudecuoi"></td>
<td class="tdtieudecuoi">Xem kết quả trực tiếp tại iKetqua.net</td>
</tr>
</tbody>
</table>
</td>
<td class="tddd">
<table class="tbdd">
<tbody>
<tr class="trkq">
<th class="thdddau">Đầu</th>
<th class="thddduoi">Đuôi</th>
</tr>
<tr>
<td class="tdkqgiai">0</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">1</td>
<td class="tdkqso">5,6,6</td>
</tr>
<tr>
<td class="tdkqgiai">2</td>
<td class="tdkqso">3</td>
</tr>
<tr>
<td class="tdkqgiai">3</td>
<td class="tdkqso">2,4</td>
</tr>
<tr>
<td class="tdkqgiai">4</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">5</td>
<td class="tdkqso">0,6,6,6</td>
</tr>
<tr>
<td class="tdkqgiai">6</td>
<td class="tdkqso">0,1</td>
</tr>
<tr>
<td class="tdkqgiai">7</td>
<td class="tdkqso">1,6</td>
</tr>
<tr>
<td class="tdkqgiai">8</td>
<td class="tdkqso">7,9</td>
</tr>
<tr>
<td class="tdkqgiai">9</td>
<td class="tdkqso">1,0</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Check my comments in css.
This is a rounding anomaly. It is a bad idea to use an inner table. You should use one big table instead, something like this:
.datatable {
border-collapse: collapse;
}
.datatable td {
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: 25px;
padding: 3px;
}
.datatable .noborder {
border: hidden;
}
.datatable .titlecell {
color: #FFFFFF;
background-color: #80A5CE;
}
.datatable .subtitlehead {
background-color: #910000;
}
.datatable .subtitlecell {
color: #CE4859;
}
.datatable .maincolcell {
color: #910000;
}
.datatable .red {
color: #FF0000;
}
<table class="datatable">
<tr>
<td colspan="4" class="titlecell noborder">Kết quả xổ số Miền Nam ngày 02-11-2014 (Chủ nhật)</td>
</tr>
<tr>
<td class="subtitlehead">Giải</td>
<td class="subtitlecell">Kiên Giang</td>
<td class="subtitlehead">Đầu</td>
<td class="subtitlehead">Đuôi</td>
</tr>
<tr>
<td class="maincolcell">Đặc biệt</td>
<td class="red">048674</td>
<td class="maincolcell">0</td>
<td>9,1,2</td>
</tr>
<tr>
<td class="maincolcell">Giải nhất</td>
<td>38463</td>
<td class="maincolcell">1</td>
<td>6</td>
</tr>
<tr>
<td class="maincolcell">Giải nhì</td>
<td>37309</td>
<td class="maincolcell">2</td>
<td>3</td>
</tr>
<tr>
<td class="maincolcell">Giải ba</td>
<td>20091-22416</td>
<td class="maincolcell">3</td>
<td>9,9,5</td>
</tr>
<tr>
<td class="maincolcell">Giải bốn</td>
<td>28539-63139-58063-48935-41701-02723-41398</td>
<td class="maincolcell">4</td>
<td></td>
</tr>
<tr>
<td class="maincolcell">Giải năm</td>
<td>1102</td>
<td class="maincolcell">5</td>
<td>1,0</td>
</tr>
<tr>
<td class="maincolcell">Giải sáu</td>
<td>5373-2976-4875</td>
<td class="maincolcell">6</td>
<td>3,3</td>
</tr>
<tr>
<td class="maincolcell">Giải bảy</td>
<td>551</td>
<td class="maincolcell">7</td>
<td>4,3,6,5</td>
</tr>
<tr>
<td class="maincolcell">Giải tám</td>
<td>50</td>
<td class="maincolcell">8</td>
<td></td>
</tr>
<tr>
<td class="titlecell noborder"></td>
<td class="titlecell noborder">Xem kết quả trực tiếp tại iKetqua.net</td>
<td class="maincolcell">9</td>
<td>1,8</td>
</tr>
<tr>
<td class="subtitlehead">Giải</td>
<td class="subtitlecell">Lâm Đồng</td>
<td class="subtitlehead">Đầu</td>
<td class="subtitlehead">Đuôi</td>
</tr>
<tr>
<td colspan="4">and so on…</td>
</tr>
</table>
I am trying to develop a web page that has a table running down the left hand side of a div and then displays content on the right. I have the table setup, but for the life of me I cannot figure out how to display other content on the right (and not have it appear below the table).
Here is my code so far: http://jsfiddle.net/fZJnp/
I would like to have a usable area that takes up the remaining width in the 'content' div.
Here is the css that is applied to the content div and table respectively:
#content {
margin: 0 auto;
width:50%;
height:auto;
border:solid 1px #003366;
background-color:#FFF;
padding:10px;
-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75), 0px -1px 2px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75), 0px -1px 2px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75), 0px -1px 2px 0px rgba(0,0,0,0.75);
}
table {
border-collapse: collapse;
background:#EEE;
color:#111;
}
Float:left, when applied to the table, seems to let me display information and other elements on the right, however it messes up other elements on the page.
Please let me know what you think, hopefully I explained my problem correctly.
Thanks in advance!
I would use two divs, a left and a right. Here is the HTML and CSS I used to make it work. You might want to check out the CSS framework "Bootstrap," released by Twitter. It makes it quite easy to achieve layouts like this using their prewritten stylesheets.
HTML:
<body>
<div id="left">
<table>
<thead>
<tr>
<th>Type</th>
<th>Destination</th>
</tr>
</thead>
<tbody>
<tr>
<td>A239</td>
<td class="Lowsec">Lowsec</td>
</tr>
<tr>
<td>A641</td>
<td class="Highsec">Highsec</td>
</tr>
<tr>
<td>A982</td>
<td class="C6">C6</td>
</tr>
<tr>
<td>B041</td>
<td class="C6">C6</td>
</tr>
<tr>
<td>B274</td>
<td class="Highsec">Highsec</td>
</tr>
<tr>
<td>B449</td>
<td class="Highsec">Highsec</td>
</tr>
<tr>
<td>C125</td>
<td class="C2">C2</td>
</tr>
<tr>
<td>C140</td>
<td class="Lowsec">Lowsec</td>
</tr>
<tr>
<td>C247</td>
<td class="C3">C3</td>
</tr>
<tr>
<td>C248</td>
<td class="Nullsec">Nullsec</td>
</tr>
<tr>
<td>C391</td>
<td class="Lowsec">Lowsec</td>
</tr>
<tr>
<td>D364</td>
<td class="C2">C2</td>
</tr>
<tr>
<td>D382</td>
<td class="C2">C2</td>
</tr>
<tr>
<td>D792</td>
<td class="Highsec">Highsec</td>
</tr>
<tr>
<td>D845</td>
<td class="Highsec">Highsec</td>
</tr>
<tr>
<td>E175</td>
<td class="C4">C4</td>
</tr>
<tr>
<td>E545</td>
<td class="Nullsec">Nullsec</td>
</tr>
<tr>
<td>G024</td>
<td class="C2">C2</td>
</tr>
<tr>
<td>H121</td>
<td class="C1">C1</td>
</tr>
<tr>
<td>H296</td>
<td class="C5">C5</td>
</tr>
<tr>
<td>H900</td>
<td class="C5">C5</td>
</tr>
<tr>
<td>I182</td>
<td class="C2">C2</td>
</tr>
<tr>
<td>J244</td>
<td class="Lowsec">Lowsec</td>
</tr>
<tr>
<td>K162</td>
<td class="Generic Exit">Generic Exit</td>
</tr>
<tr>
<td>K329</td>
<td class="Nullsec">Nullsec</td>
</tr>
<tr>
<td>K346</td>
<td class="Nullsec">Nullsec</td>
</tr>
<tr>
<td>L477</td>
<td class="C3">C3</td>
</tr>
<tr>
<td>L614</td>
<td class="C5">C5</td>
</tr>
<tr>
<td>M267</td>
<td class="C3">C3</td>
</tr>
<tr>
<td>M555</td>
<td class="C5">C5</td>
</tr>
<tr>
<td>M609</td>
<td class="C4">C4</td>
</tr>
<tr>
<td>N062</td>
<td class="C5">C5</td>
</tr>
<tr>
<td>N110</td>
<td class="Highsec">Highsec</td>
</tr>
<tr>
<td>N290</td>
<td class="Lowsec">Lowsec</td>
</tr>
<tr>
<td>N432</td>
<td class="C5">C5</td>
</tr>
<tr>
<td>N766</td>
<td class="C2">C2</td>
</tr>
<tr>
<td>N770</td>
<td class="C5">C5</td>
</tr>
<tr>
<td>N968</td>
<td class="C3">C3</td>
</tr>
<tr>
<td>N944</td>
<td class="Lowsec">Lowsec</td>
</tr>
<tr>
<td>O128</td>
<td class="C4">C4</td>
</tr>
<tr>
<td>O477</td>
<td class="C3">C3</td>
</tr>
<tr>
<td>O883</td>
<td class="C3">C3</td>
</tr>
<tr>
<td>P060</td>
<td class="C1">C1</td>
</tr>
<tr>
<td>Q317</td>
<td class="C1">C1</td>
</tr>
<tr>
<td>R051</td>
<td class="Lowsec">Lowsec</td>
</tr>
<tr>
<td>R474</td>
<td class="C6">C6</td>
</tr>
<tr>
<td>R943</td>
<td class="C2">C2</td>
</tr>
<tr>
<td>S047</td>
<td class="Highsec">Highsec</td>
</tr>
<tr>
<td>S199</td>
<td class="Nullsec">Nullsec</td>
</tr>
<tr>
<td>S804</td>
<td class="C6">C6</td>
</tr>
<tr>
<td>T405</td>
<td class="C4">C4</td>
</tr>
<tr>
<td>U210</td>
<td class="Lowsec">Lowsec</td>
</tr>
<tr>
<td>U319</td>
<td class="C6">C6</td>
</tr>
<tr>
<td>U574</td>
<td class="C6">C6</td>
</tr>
<tr>
<td>V283</td>
<td class="Nullsec">Nullsec</td>
</tr>
<tr>
<td>V301</td>
<td class="C1">C1</td>
</tr>
<tr>
<td>V753</td>
<td class="C6">C6</td>
</tr>
<tr>
<td>V911</td>
<td class="C5">C5</td>
</tr>
<tr>
<td>W237</td>
<td class="C6">C6</td>
</tr>
<tr>
<td>X702</td>
<td class="C3">C3</td>
</tr>
<tr>
<td>X877</td>
<td class="C4">C4</td>
</tr>
<tr>
<td>Y683</td>
<td class="C4">C4</td>
</tr>
<tr>
<td>Y709</td>
<td class="C1">C1</td>
</tr>
<tr>
<td>Z060</td>
<td class="Nullsec">Nullsec</td>
</tr>
<tr>
<td>Z142</td>
<td class="Nullsec">Nullsec</td>
</tr>
<tr>
<td>Z457</td>
<td class="C4">C4</td>
</tr>
<tr>
<td>Z647</td>
<td class="C1">C1</td>
</tr>
<tr>
<td>Z971</td>
<td class="C1">C1</td>
</tr>
</tbody>
</table></div><div id="right"><p>This is test content</p></div>
</div>
</body>
CSS:
#font-face {
font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}
html {
font-family:'Myriad Pro Regular';
font-weight:normal;
background-color:#CCC;
}
#font-face {
font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}
#left {
float:left;
width:50%;
}
#right {
float:right;
width:50%;
}
table {
border-collapse: collapse;
background:#EEE;
color:#111;
}
th, td {
border: solid 1px #222;
padding:5px;
}
tr:hover {
background:#CCC;
}
tr.highlight {
background:yellow;
}
td.Highsec, td.C1, td.C2 {
background-color:#468966;
}
td.Lowsec, td.C3, td.C4 {
background-color:#FFB03B;
}
td.Nullsec, td.C5, td.C6 {
background-color:#8E2800;
}
You can do it like this
HTML
<div id="content">
<div class="leftBar">
<!- your table goes here -->
</div>
<div class="rightCnt">
test test test tset
</div>
<div class="clear"></div>
</div>
CSS
.leftBar {
float: left;
}
.rightCnt {
margin-left: 150px
}
.clear {
clear: both
}