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
}
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
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>
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">
This is an easy question, but I cannot seem to solve it. My html table can be seen at the following:
http://jsfiddle.net/Rochefort/kvUKG/
And also included here:
<table style="background:#fff;width:300px;margin-left:14px;" class="form">
<tbody>
<tr style="">
<td class="bosluk"></td>
<td class="alis_baslik"><strong>ALIŞ</strong></td>
<td class="satis_baslik"><strong>SATIŞ</strong></td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar">DOLAR</td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
</tbody>
</table>
I implemented CSS but the DOLLAR item has too much space. How can I remove this extra space?
You can use text-align: right with padding-right instead of padding-left.
Example: http://jsfiddle.net/BfD2v/
.ikonlar {
padding-right:5px;
font-family: Arial;
font-size:12px;
font-weigth: bold;
color: #000;
text-align: right;
}
If you want to make the whole column narrower, you can set the width od the column with this:
.bosluk, .ikonlar {
width: 10px;
}
You should also probably use <th> tags for the headers. The columns would align themselves under the <td> tags then. Like:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
I am having a problem with a page because its longer than one page it break a table so it would be printed in two pages.
I would need to stop this from happening, but I don't know how.
I tried
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
Which I saw in another question here but no luck so far.
I am working on IE7, but it has to work on IE6,IE7,IE8 mainly and others if possible.
Any recommendations?
Many thanks.
CSS
/*Universal selector:
This rule set will be applied to every element in a document:*/
*
{
margin:auto;
padding:auto;
/*text-align:center;*/
font-size:1em;
}
/*The folowing rule will help to minimaze the differences between browesers*/
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
img {border:none;}
caption,th {text-align:left;}
table {
border-spacing:0;
font-size:1em;
font-weight:normal;
font-style:normal;
font-family:Times New Roman;
page-break-inside:avoid;
}
tr{
page-break-inside:avoid;
page-break-after:auto
}
.divTitle{
margin:10px;
}
}
.title
{
font-weight:bold;
color:#0076BF;
font-size:1.4em;
font-family:Times New Roman;
}
.divContainer
{
margin:10px;
background-color:#C7D8EE;
border:2px solid #0076BF;
text-align:left;
overflow:visible;
}
.tableContainer
{
color:#0076BF;
margin: -10px 0px -10px 0px;
border-spacing: 10px;
empty-cells:show;
width:90%;
}
.tableContainer tr td{
white-space:nowrap;
}
.tableContainerRow2{
background-color:white;
border:2px solid #0076BF;
}
.divBlueBarTitle{
margin:15px 10px -7px 10px;
background-color:#0076BF;
}
.divBlueBarTitle font{
font-size:1.2em;
font-family:Times New Roman;
font-weight:bold;
color:white;
text-indent:10px;
}
.divContainerWhite
{
margin:15px 10px 0px 10px;
background-color:white;
text-align:left;
}
.tableContainerWhite
{
color:#0076BF;
margin: 0px 0px 0px -10px;
border-spacing: 10px;
width:90%;
}
.tableContainerWhite td{
white-space:nowrap;
}
.footer {
margin-top:40px;
padding-bottom:20px;
font-family: Arial, Helvetica, sans-serif;
color: #303030;
line-height: normal;
font-size:smaller;
text-align:right;
width:95%;
}
HTML
<body>
<div class="divTitle">
<font class="title"> Maternity Diary Event</font>
</div>
<!--Maternity Diary Event-->
<div class="divContainer">
<table class="tableContainer" cellspacing="10px">
<tr>
<td>NHS Number</td>
<td> </td>
<td>Date of Visit</td>
<td> </td>
<td colspan="3">Care Time Started</td>
<td> </td>
<td> </td>
<td rowspan="2" style="font-weight:bold;vertical-align:middle;">Tick when<br/> care starts</td>
</tr>
<tr >
<td width="90" class="tableContainerRow2">
<xsl:value-of select="//MaternityDiaryEvent/NHSNumber"/>
</td>
<td > </td>
<td width="80" class="tableContainerRow2"> 12/12/09</td>
<td > </td>
<td width="40" class="tableContainerRow2"> 12</td>
<td width="5">:</td>
<td width="40" class="tableContainerRow2"> 10</td>
<td > </td>
<td style="text-align:right" > ☑</td>
</tr>
</table>
<table class="tableContainer" cellspacing="10px" >
<tr>
<td></td>
<td>Initials</td>
<td>Surname</td>
</tr>
<tr>
<td width="80" style="font-weight:bold;">Midwife</td>
<td width="50" class="tableContainerRow2"> </td>
<td class="tableContainerRow2"> </td>
</tr>
<tr>
<td></td>
<td>Initials</td>
<td>Surname</td>
</tr>
<tr>
<td style="font-weight:bold;">Doctor</td>
<td class="tableContainerRow2"> </td>
<td class="tableContainerRow2"> </td>
</tr>
</table>
<table class="tableContainer" cellspacing="10px" >
<tr>
<td width="250">Forename</td>
<td>Surname</td>
</tr>
<tr>
<td class="tableContainerRow2"> </td>
<td class="tableContainerRow2"> </td>
</tr>
</table>
<table class="tableContainer" cellspacing="10px" style="margin-bottom:10px;" >
<tr>
<td width="90">Date of Birth</td>
<td width="150"></td>
<td width="100">Casenote No:</td>
<td></td>
</tr>
<tr>
<td class="tableContainerRow2"> </td>
<td></td>
<td class="tableContainerRow2"> </td>
<td></td>
</tr>
</table>
</div>
<!--Site Visit-->
<div class="divBlueBarTitle">
<font>SITE VISIT</font>
</div>
<div class="divContainer">
<table class="tableContainer" cellspacing="10px" style="margin-bottom:10px;">
<tr>
<td>Home</td>
<td> ☑</td>
<td>Blake Maty Centre</td>
<td> ☑</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Consultant ANC</td>
<td> ☑</td>
<td>Grange Maty Centre</td>
<td> ☑</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Midwifery ANC</td>
<td> ☑</td>
<td>MRMC/B5</td>
<td> ☑</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Day assessment Unit</td>
<td> ☑</td>
<td>Ports Maty Centre SMH</td>
<td> ☑</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Labour Ward</td>
<td> ☑</td>
<td>Posnatal Ward</td>
<td> ☑</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Antenatal Ward</td>
<td> ☑</td>
<td>Telephone Assessment</td>
<td> ☑</td>
<td>Other(give reason below)</td>
<td> ☑</td>
</tr>
<tr>
<td class="tableContainerRow2" colspan="6" rowspan="2"> </td>
</tr>
</table>
</div>
<div class="divContainerWhite">
<table class="tableContainerWhite" cellspacing="10px" style="font-size:1.1em;">
<tr>
<td style="text-decoration:underline;font-weight:bold;white-space:nowrap;">Reason for Contact Booking:</td>
<td> </td>
<td width="150" style="font-weight:bold;">Gestation: Weeks:</td>
<td width="30" class="tableContainerRow2"> </td>
<td width="50" style="font-weight:bold;">Days:</td>
<td width="30" class="tableContainerRow2"> </td>
<td > </td>
</tr>
</table>
<table class="tableContainerWhite" cellspacing="10px">
<tr>
<td >Choice of Birth Offered</td>
<td> ☑</td>
<td >Domestic Violence Identified</td>
<td> ☑</td>
<td >Late Booker (> 11Wks 6 Days)</td>
<td> ☑</td>
</tr>
<tr>
<td style="white-space:nowrap">Contact Number Provided</td>
<td> ☑</td>
<td style="white-space:nowrap">Safeguarding Children identified</td>
<td> ☑</td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div class="divContainer">
<table class="tableContainer" cellspacing="10px">
<tr>
<td colspan="4" style="font-size:1.1em;text-decoration:underline;font-weight:bold;">Reason For Late Booking</td>
</tr>
<tr>
<td width="200">Woman booked herself late</td>
<td> ☑</td>
<td colspan="4" style="white-space:nowrap;"> ☑ Other (give reason below)</td>
</tr>
<tr>
<td>Recently moved to area</td>
<td> ☑</td>
<td rowspan="3" colspan="5" class="tableContainerRow2" > </td>
</tr>
<tr>
<td>Transferred from another hospital</td>
<td> ☑</td>
</tr>
<tr>
<td>Late booking by Midwife</td>
<td> ☑</td>
</tr>
<tr>
<td>Intrapartum</td>
<td> ☑</td>
<td>Posnatal Admission</td>
<td colspan="4"> ☑</td>
</tr>
<tr>
<td>Antenatal Admision</td>
<td> ☑</td>
<td>Intrauterine Transfer</td>
<td colspan="4"> ☑</td>
</tr>
<tr>
<td >Antenatal Check Routine</td>
<td > ☑</td>
<td style="white-space:nowrap;font-weight:bold;">Gestation: Weeks:</td>
<td width="30" class="tableContainerRow2"> </td>
<td style="font-weight:bold;">Days:</td>
<td width="30" class="tableContainerRow2"> </td>
<td > </td>
</tr>
<tr>
<td>Postnatal Check Routine</td>
<td> ☑</td>
<td colspan="2">Postnatal Check Other</td>
<td> ☑</td>
<td>Day</td>
<td width="30" class="tableContainerRow2"> </td>
</tr>
</table>
<table class="tableContainer" cellspacing="10px">
<tr>
<td width="20%">Details</td>
<td class="tableContainerRow2"> </td>
</tr>
</table>
<table class="tableContainer" cellspacing="10px">
<tr>
<td style="white-space:nowrap">Consultant Appt Made</td>
<td>YES</td>
<td> ☑</td>
<td>NO</td>
<td> ☑</td>
<td width="50%"></td>
</tr>
</table>
</div>
<div class="divContainerWhite">
<table class="tableContainerWhite" cellspacing="10px">
<tr>
<td style="text-decoration:underline;font-size:1.1em;font-weight:bold;">Baby</td>
<td>Routine Check:</td>
<td> ☑</td>
<td>Other Check</td>
<td> ☑</td>
<td>Day</td>
<td width="30" class="tableContainerRow2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="9">Details</td>
</tr>
<tr>
<td colspan="9" class="tableContainerRow2"> </td>
</tr>
</table>
<table class="tableContainerWhite" cellspacing="10px">
<tr>
<td colspan="6" style="font-size:1.1em;font-weight:bold">PUK</td>
</tr>
<tr>
<td>Weight</td>
<td> ☑</td>
<td >SBR</td>
<td> ☑</td>
<td > </td>
<td> </td>
</tr>
<tr>
<td style="white-space:nowrap">Feeding Advice</td>
<td> ☑</td>
<td>Jaundice</td>
<td> ☑</td>
<td> ☑</td>
<td>TICK ON LEAVING LOCATION</td>
</tr>
</table>
</div>
<!--Footer-->
<div class="footer">
© 2009 Graphnet Health Ltd. All rights reserved. | Disclaimer
</div>
</body>
If it fits on a single page and you always want it to be on a single page, then I would try specifying page-break-before: always. This would force 2 pages at times when it possibly could have fit on one, but it should always keep the table on a single page, providing it fits.