I know it has been already asked about how to create two tables in HTML side by side.
But those answers doesn't solve my problem.
I am already aware we can use:
display: inline-block or
float: left
But in my case number of cell in table is too much that second table moves below first table.
My fiddle
http://jsfiddle.net/vyzmgews/1/
<table border=1 style="display: inline-block">
<tr>
<td>Cell1 content</td>
<td>Cell2 content</td>
<td>Cell3 content</td>
<td>Cell4 content</td>
<td>Cell5 content</td>
<td>Cell6 content</td>
<td>Cell7 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
</tr>
</table>
<table border=1 style="display: inline-block">
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
How can i keep both the table side by side with the scroll bar.
You could wrapp both tables in a div and define for it display: flex.
Working example:
.table-wrapper {
display: flex;
}
<div class="table-wrapper">
<table border=1>
<tr>
<td>Cell1 content</td>
<td>Cell2 content</td>
<td>Cell3 content</td>
<td>Cell4 content</td>
<td>Cell5 content</td>
<td>Cell6 content</td>
<td>Cell7 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
</tr>
</table>
<table border=1>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
</div>
You could simply wrap them in another (borderless) table:
<table>
<tr>
<td>
<table border=1 class="inlineTable">
<tr>
<td>Cell1 content</td>
<td>Cell2 content</td>
<td>Cell3 content</td>
<td>Cell4 content</td>
<td>Cell5 content</td>
<td>Cell6 content</td>
<td>Cell7 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
</tr>
</table>
</td>
<td>
<table border=1 class="inlineTable">
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
</td>
</tr>
</table>
Can you try with this code? Im not sure is this what you are expect.
<div class="row">
<table border=1 class="inlineTable">
<tr>
<th>Cell1 topic</th>
<th>Cell1 topic</th>
<th>Cell1 topic</th>
</tr>
<tr>
<td>Cell1 content</td>
<td>Cell1 content</td>
<td>Cell1 content</td>
</tr>
</table>
<table border=1 class="inlineTable">
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
</div>
or you can add 2 column grid for that.
Related
I've referred to this question: HTML — Two Tables Horizontally Side by Side
In SQL I have tried the following:
1.
DECLARE #HTML NVARCHAR(2000);
SET #HTML =
N'
<table border=1 style=''display: inline-block''>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
<table border=1 style=''display: inline-block''>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
'
EXEC msdb..sp_send_dbmail
#recipients = 'me#blahblah.co.uk',
#subject = 'foo',
#body_format = 'html',
#body = #HTML
2.
DECLARE #HTML NVARCHAR(2000);
SET #HTML =
N'
<table border=1 style=''float: left''>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
<table border=1 style=''float: left''>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
'
EXEC msdb..sp_send_dbmail
#recipients = 'me#blahblah.co.uk',
#subject = 'foo',
#body_format = 'html',
#body = #HTML
Neither 1 or 2 aligns the tables side-by-side in the email. What am I doing wrong?
As per my understanding, you are missing the HTML tag try the below one.
Add second table float property to right and both table display property to inline-table.
DECLARE #HTML NVARCHAR(2000);
SET #HTML = N'<html> <body> <table border=1 style=''float: left; display: inline-table;''>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
<table border=1 style=''float: right; display: inline-table;''>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
</body>
</html>'
I have a 100% height layout split to three parts: header, content, footer.
I'd like to display a table inside a the content section with 100% height and i want the table body to have a vertical scroll bar for the table body content.
How can i do that?
it seems like i cannot set the tbody height to 100% and have a scrollbar?
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
border: 1px solid red;
text-align: center;
}
#container > div {
display: table-row;
width: 100%;
}
#container > div > div {
display: table-cell;
width: 100%;
border-radius:10px;
}
#header > div {
height:50px;
border:solid 2px #aaa;
}
#content > div {
height: 100%;
background:#f0f4f0;
border:solid 2px #5a5;
}
#footer > div {
height:50px;
border:solid 2px #a55;
}
table {
table-layout:fixed;
margin:auto;
}
th, td {
padding:5px 10px;
border:1px solid #000;
}
thead, tfoot {
background:#f9f9f9;
display:table;
width:100%;
width:calc(100% - 18px);
}
tbody {
height:400px;
overflow:auto;
overflow-x:hidden;
display:block;
width:100%;
}
tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
<div id="container">
<div id="header">
<div>header</div>
</div>
<div id="content">
<div>
<table>
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell2 content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div id="footer">
<div>footer</div>
</div>
</div>
Your layout is a bit messed up. Too many containing div in my opinion. Did some changes using flex - so the table container will have
display: flex;
flex-direction: column;
overflow: auto;
and the table will have flex-grow: 1;
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
border: 1px solid red;
text-align: center;
}
#container>div {
width: 100%;
display: flex;
flex-direction: column;
}
#container>div>div {
width: 100%;
height: 100%;
border-radius: 10px;
overflow: auto;
}
#header {
flex-basis: 50px;
flex-grow: 0;
flex-shrink: 0;
}
#header>div {
height: 50px;
border: solid 2px #aaa;
}
#content {
flex-grow: 1;
}
#content>div {
height: 100%;
background: #f0f4f0;
border: solid 2px #5a5;
display: flex;
flex-direction: column;
}
#footer{
flex-basis: 50px;
flex-grow: 0;
flex-shrink: 0;
}
#footer>div {
height: 50px;
border: solid 2px #a55;
}
table {
flex-grow: 1;
table-layout: fixed;
margin: auto;
}
th,
td {
padding: 5px 10px;
border: 1px solid #000;
}
thead,
tfoot {
background: #f9f9f9;
display: table;
width: 100%;
width: calc(100% - 18px);
}
tbody {
overflow: auto;
overflow-x: hidden;
display: block;
width: 100%;
}
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
<div id="container">
<div id="header">
<div>header</div>
</div>
<div id="content">
<div>
<table>
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell2 content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div id="footer">
<div>footer</div>
</div>
</div>
I had to use javascript for this but maybe someone can come up with a pure CSS solution.
Main sections of the page
I'm using flexbox to position the header, main and footer sections of the page allowing the main to take up as much vertical space that it can:
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
The Table
I set the table to take up 100% of the height and width in the main section and set each tr element to display flex allowing all their direct child elements to take up equal amounts of space:
table {
width: 100%;
height: 100%;
}
tr {
display: flex;
}
tr > * {
flex: 1;
}
I've set the tbody element to display: block which will allow for content to be scrollable if it overflows:
tbody {
display: block;
overflow-y: scroll;
}
tbody tr {
height: 40vh; // for demonstrating the scrolling of the tbody
}
I then used some javascript to set the height of the tbody element, please find the documentation in the comments below:
setTbodyHeight();
window.addEventListener("resize", setTbodyHeight);
function setTbodyHeight() {
// get the viewport height
let viewportHeight = window.innerHeight;
// calculate how much of the height the main should consume
let headerHeight = getHeight("header");
let footerHeight = getHeight("footer");
let mainHeight = viewportHeight - (headerHeight + footerHeight);
// from the main height calcuate how much space would be available if you subtracted the tfoot/thead height
let theadHeight = getHeight("thead");
let tfootHeight = getHeight("tfoot");
let tbodyHeight = mainHeight - (theadHeight + tfootHeight);
// set the height of the tbody to this value
let tbody = document.querySelector("tbody");
tbody.style.height = tbodyHeight + "px";
function getHeight(elementName) {
let element = document.querySelector(elementName);
let elementCSS = window.getComputedStyle(element);
let height = parseInt(elementCSS.getPropertyValue("height"));
return height;
}
}
/* IGNORE RULES FROM HERE.....*/
html,
body {
height: 100%;
}
body {
font-family: sans-serif;
margin: 0;
}
header::after,
footer::after {
content: "." attr(class);
}
tbody tr:nth-child(even) {
background: firebrick;
color: white
}
td {
text-align: center;
}
/*.....TO HERE*/
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
table {
width: 100%;
height: 100%;
}
tr {
display: flex;
}
tr>* {
flex: 1;
}
tbody {
display: block;
overflow-y: scroll;
}
tbody tr {
height: 20vh;
}
tbody td {
line-height: 20vh;
}
<header class="header"></header>
<main class="main">
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
</tr>
</tfoot>
</table>
</main>
<footer class="footer"></footer>
I have the following issue with my bootstrap table. I cannot set a custom width to cells at table head. Even if I do, it's not set. I searched and learned that bootstrap does prevent that by adding padding to cells. But it still didn't work when I added padding:0 to each cell at table head. Anyways let me show the code and screenshots
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="table-responsive">
<table class="table table-hover table-white">
<thead>
<tr>
<th style="max-width: 1%;">#</th>
<th style="max-width: 48.5%;">Component</th>
<th style="max-width: 2.5%;">Unit Cost</th>
<th style="max-width: 2.5%;">Qty</th>
<th style="max-width: 2.5%;">Currency</th>
<th style="max-width: 13%;">WBS</th>
<th style="max-width: 14%;">Purchase Type</th>
<th style="max-width: 10%;">Vendor</th>
<th style="max-width: 2%;"></th>
<th style="max-width: 2%;"></th>
<th style="max-width: 2%;"></th>
</tr>
</thead>
</table>
</div>
</div>
It looks like this as you can see the width is not applied
However it should look like this without scrollbar.
So my questions are
How can I apply fixed width to those cells?
How can I make the table look 100% visible without that scrollbar. Somehow squeezing it
Thanks, beforehand. If anything else needs to be shared let me know, please.
You need to disable padding for all cells, not only the ones in the header.
If you do not want, that bigger content increases the column width, you should hide the overflow.
.table-responsive td,
.table-responsive th {
padding: 0 !important;
overflow: hidden;
}
If you want to resize the table to always fit into the screen, you would need some JavaScript.
(function() {
const responsiveTable = document.querySelector('.responsive-table table');
responsiveTable.style.transformOrigin = '0 0';
function resizeTable() {
responsiveTable.style.transform = 'scale(1)';
const tableWidth = responsiveTable.getBoundingClientRect().width;
const resizeFactor = document.body.offsetWidth / tableWidth;
responsiveTable.style.transform = `scale(${resizeFactor})`;
}
resizeTable();
window.addEventListener('resize', resizeTable);
})();
.responsive-table table {
background-color: red;
}
.responsive-table td,
.responsive-table th {
background-color: orange;
}
<div class="responsive-table">
<table>
<thead>
<tr>
<th style="width: 5%">Column 1</th>
<th style="width: 5%">Column 2</th>
<th style="width: 5%">Column 3</th>
<th style="width: 5%">Column 4</th>
<th style="width: 5%">Column 5</th>
<th style="width: 5%">Column 6</th>
<th style="width: 5%">Column 7</th>
<th style="width: 5%">Column 8</th>
<th style="width: 5%">Column 9</th>
<th style="width: 5%">Column 10</th>
<th style="width: 5%">Column 11</th>
<th style="width: 5%">Column 12</th>
<th style="width: 5%">Column 13</th>
<th style="width: 5%">Column 14</th>
<th style="width: 5%">Column 15</th>
<th style="width: 5%">Column 16</th>
<th style="width: 5%">Column 17</th>
<th style="width: 5%">Column 18</th>
<th style="width: 5%">Column 19</th>
<th style="width: 5%">Column 20</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
</tr>
<tr>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
</tr>
<tr>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
</tr>
</tbody>
</table>
</div>
you can code :
<div class="table-responsive">
<table class="table">
...
</table>
</div>
and style
.table-responsive {
display: table;
}
I can't seem to figure out as to why my div/table column lines would appear broken if the body of the table was scrolled left and right. Their also appears to be some over run to the right of my html data table, how can I remedy these two problems. I've attached a pic of the problem:
Here is the fiddle - http://jsfiddle.net/EPq69/
Here is the HTML markup:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#data_container {
border: 1px solid blue;
width: 100%;
}
#data_wrapper {
width: 100%;
border-right:0px;
height: 150px;
overflow-x: scroll;
}
#data_headers, #data_body {
width: 100%;
padding: 0px;
border-spacing: 0px;
table-layout: fixed;
}
#data_headers {
}
#data_body {
}
#data_headers td, #data_body td {
border-right: 1px solid green;
width: 150px;
}
#data_headers td {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div id="data_container">
<table id="data_headers">
<tr>
<td>Header1</td>
<td>Header2</td>
<td>Header3</td>
<td>Header4</td>
<td>Header5</td>
<td>Header6</td>
<td>Header7</td>
<td>Header8</td>
<td>Header9</td>
<td>Header10</td>
</tr>
</table>
<div id="data_wrapper">
<table id="data_body">
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Put the overflow-x on the container. If you have the overflow-x on one of the tables then only that table will be scrolled and the other table will not be scrolling which is why you get the offset. If you put it on the container, both can be scrolled at the same time
#data_container {
border: 1px solid blue;
width: 100%;
overflow-x: scroll;
}
#data_wrapper {
width: 100%;
border-right:0px;
height: 150px;
}
http://jsfiddle.net/EPq69/1/
A small gap occurs to the right of a table when the following conditions are met:
table border is greater than 1px
border-collapse is collapse
browser vertical scrollbar is visible
browser is firefox
Here is some sample code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:green;}
table
{
background-color:#fff;
width:600px;
border-collapse:collapse;
border:4px solid #222;
/*border-spacing:0;*/
margin: 0px auto;
}
tr {height:56px;}
td
{
font-family: trebuchet ms;
font-size: 10.0pt;
font-weight:bold;
border:1px solid #222;
padding-left:4px;
}
</style>
</head>
<body>
<table>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
</table>
</body>
</html>
Any ideas are appreciated.