How to align entire table to right with CSS?
margin-right does not help
Here: http://jsfiddle.net/dimskraft/Y2FKy/
HTML:
<table class="block logo">
<colgroup>
<col style="width:50%"/>
<col style="width:50%"/>
</colgroup>
<tr>
<td>something</td>
<td>
<table class="menu">
<tr>
<td>Item 1</td>
<td>Item 2</td>
</tr>
</table>
</td>
</tr>
</table>
CSS:
table {
width: 100%;
}
table.menu {
width: auto;
margin-right: 0px;
}
You need to set the left margin to auto too. That will make the left margin push the table as far right as is allowed by the right margin.
table {
width: 100%;
}
table, td {
border: solid black 1px;
}
table.menu {
width: auto;
margin-right: 0px;
margin-left: auto;
}
<table class="block logo">
<colgroup>
<col style="width:50%"/>
<col style="width:50%"/>
</colgroup>
<tr>
<td>something</td>
<td>
<table class="menu">
<tr>
<td>Item 1</td>
<td>Item 2</td>
</tr>
</table>
</td>
</tr>
</table>
Easy -
table {
width: 60%; /* whichever width you want */
margin-left: 40%; /* minus the amount to make it 100% */
}
Use float: right instead:
table.menu {
width: auto;
float: right;
}
JSFiddle
Solution 2:
As float is a not a good practice to align elements, you can use <td style="text-align: right"> and display: inline-table in the table:
<td style="text-align: right">
<table border="1" class="menu">
<tr>
<td>Item 1</td>
<td>Item 2</td>
</tr>
</table>
</td>
table.menu {
width: auto;
display: inline-table;
}
JSFiddle solution 2
You can float your table to the right by doing
table {
float: right;
width: auto;
}
Demo
But please note that you will need to clear the float for content that comes after it
Related
I am trying to make a web-page where I have a table of information and an image side-by-side as in the example below
Example:
bar fOo
Instead of:
bar
fOo
I have placed the image within a div and the information table in another div element, and I have been playing with the CSS properties to try to get them to be side-by-side, however they refuse to work as expected.
The CSS is below, #book is the image itself, while book_information is the information inside the table.
#book
{
float: right;
flex: 33.33%;
padding: 5px;
margin-left: 0;
width: 50%;
}
#book_information
{
width: 50%;
float: left;
padding-right: 0;
margin-right: 0;
}
table
{
border-collapse: collapse;
float:top;
border: 1px solid black;
table-layout: fixed;
width: 50%;
}
What should I use to allow this to work as expected? and what improvements could work I work on to get it responsive?
Below is the html structure of the page at the moment that I am using along with this:
<main>
<div>
<div class= "left" id="book"><img src="Book.jpg" alt="></div>
<div class="left" id="book_information">
<table id="information">
<tr>
<td class="1">Price:</td>
<td class="1">€18.90</td>
</tr>
<tr>
<td>Author</td>
<td></td>
</tr>
<tr>
<td class="1">About</td>
<td class="1"><p></p></td>
</tr>
<tr>
<td>Where to get it:</td>
<td>Amazon ,
Casa Del Libro ,
FNAC ,
Libelista
</td>
</tr>
</table>
</div>
</div>
</main>
There are different ways of doing this.
Here's a solution that involves using float:left style for your table:
table {
float: left;
}
img {
width: 100px;
height: 100px;
}
<table>
<tr>
<td>Price</td>
<td>$5</td>
</tr>
<tr>
<td>Author</td>
<td>Bob</td>
</tr>
</table>
<div>
<img
src="https://via.placeholder.com/120.png?text=Book+Image"
alt="Book Image Here">
</div>
This one involves putting your table and image in yet another table:
img {
width: 100px;
height: 100px;
}
<table>
<tr>
<td>
<table>
<tr>
<td>Price</td>
<td>$5</td>
</tr>
<tr>
<td>Author</td>
<td>Bob</td>
</tr>
</table>
</td>
<td>
<div>
<img
src="https://via.placeholder.com/120.png?text=Book+Image"
alt="Book Image Here">
</div>
</td>
</tr>
</table>
This is probably really easy but I'm stuck trying to remove whitespace from a table cell when reducing the width of a nested image.
Eg I want to remove the whitespace in this example
JSFiddle: https://jsfiddle.net/8qm61hny/
HTML:
<div class="qtest">
<div class="q_test">
<div class="q_top">
</div>
<div class="q_test99">
<table class="test_table">
<tbody>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name1</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name2</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
.q_p2_img {
width:60%;
}
I've tried various css display options but cannot find what I need to do this.
Don't use percentage value because percentage value will get resolved after setting the parent width since we need a reference to resolve it. In your case, you will have 60% of the parent size and 40% of whitespace.
Use pixel value instead:
.q_p2_img {
width: 200px;
}
<div class="qtest">
<div class="q_test">
<div class="q_top">
</div>
<div class="q_test99">
<table class="test_table">
<tbody>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name1</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name2</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Use this minimum table css for cross-browser and responsive <table> styling
html
<div class="tbl">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 11</td>
<td>Data 12</td>
</tr>
<tr>
<td>MoreData 21</td>
<td>MoreData 22</td>
</tr>
</tbody>
</table>
</div>
css
.tbl {
width: 100%; /* table width */
box-sizing: border-box;
overflow-x: auto;
}
.tbl * {
margin: 0;
box-sizing: border-box;
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
font-size: 0; /* remove gap */
}
thead, tbody, tr {
width: inherit;
}
th, td {
vertical-align: top;
text-align: left;
white-space: normal;
font-size: 16px;
}
#media (max-width: 767.9px) {
table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
}
Given a table with a column that contains numbers, I'd like to position them in the center.
But, I'd like to right-align the numbers as well!
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Outputs:
Desired output:
Note: The table cell width should be constant (200px), regardless of the numbers. For example, if all numbers are 0, they all should be in the center of the table:
Also:
You are allowed to modify the content of the <td>s, but there should be one number per <tr>.
CSS only, please.
Updated based on an edit of the question and a few comments
In a comment you wrote "In the desired outcome, the cell width stays the same (200px) as numbers change".
In another comment you wrote "...my numbers are links and I want them to occupy the full cell width".
Given those requirements, the only CSS based solution I can find is, where one use CSS Table instead of <table> elements, an anchor a element displayed as table-row, making the full width clickable without adding an event handler, and for the centering, using pseudo elements to puch the numbers to the middle.
Stack snippet
.table {
display: table;
border: 1px solid black;
}
.tr {
display: table-row;
text-decoration: none;
color: black;
}
.tr span {
display: table-cell;
width: 200px;
}
a.tr {
text-align: right;
}
.tr::before, .tr::after {
content: '';
display: table-cell;
width: 50%;
}
<div class="table">
<div class="thead">
<span class="tr">
<span>Amount</span>
</span>
</div>
<div class="tbody">
<a href="#1" class="tr">
<span>45</span>
</a>
<a href="#2" class="tr">
<span>2</span>
</a>
<a href="#3" class="tr">
<span>18923538273</span>
</a>
<a href="#4" class="tr">
<span>9823</span>
</a>
</div>
</div>
<div class="table">
<div class="thead">
<span class="tr">
<span>Amount</span>
</span>
</div>
<div class="tbody">
<a href="#1" class="tr">
<span>0</span>
</a>
<a href="#2" class="tr">
<span>0</span>
</a>
<a href="#3" class="tr">
<span>0</span>
</a>
<a href="#4" class="tr">
<span>0</span>
</a>
</div>
</div>
_____________________________________________________________________________
This is my first answer, which I will leave, as there might be someone that can make use of it as is.
One simple way to accomplish that is to simply nest a table for the values, center it using auto margin and right align its td's content.
This way you will get pretty much the exact same behavior as with your original markup, but get a better control of the values alignment.
Stack snippet
table {
border: 1px solid black;
}
th {
width: 200px;
}
table table {
border: none;
margin: 0 auto;
}
table table td {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
You can of course use div's instead of a table, displayed as inline block or inline flex column.
Inline block
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td > div {
display: inline-block;
}
td > div > div {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>45</div>
<div>2</div>
<div>18923538273</div>
<div>9823</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
</td>
</tr>
</tbody>
</table>
Inline flex column
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td > div {
display: inline-flex;
flex-direction: column;
}
td > div > div {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>45</div>
<div>2</div>
<div>18923538273</div>
<div>9823</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
</td>
</tr>
</tbody>
</table>
TL;DR:
table {
border: 1px solid black;
width: 200px;
}
td {
text-align: right;
min-width: 10px;
}
td:first-child, td:last-child {
width: 50%;
}
... and adding an extra column before and after the existing one. jsFiddle here.
Initial answer:
Considering your markup,
td {
text-align: right;
border-left:7rem solid transparent;
border-right:7rem solid transparent;
}
... should do it.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
border-left:7rem solid transparent;
border-right:7rem solid transparent;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Any other solution involves changing the markup (you need to add inner elements inside <td>s, give them smaller width than the <td>, and right align their text). You can do it by modifying the HTML source or on the fly, using JavaScript.
After a good number of tries, the only reliable solution I found (implying markup modification and no JavaScript), was to add additional columns in the table, relying on the table's ability to line up all the cells in a column.
I updated the snippet below so that the column occupies the minimum necessary width, based on most wide number and right-aligns all cells based on resulting width width. This means that when all values are 0, the entire row of values are centered. Here it is:
table {
border: 1px solid black;
width: 200px;
}
td {
text-align: right;
min-width: 10px;
}
td:first-child, td:last-child {
width: 50%;
}
/* just stacking tables side by side, not part of solution */
table {
float: left;
width: 200px;
margin-right: 7px;
}
body { overflow-y: hidden;}
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>45</td>
<td></td>
</tr>
<tr>
<td></td><td>2</td><td></td>
</tr>
<tr>
<td></td><td>0</td><td></td>
</tr>
<tr>
<td></td><td>1234</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>0</td>
<td></td>
</tr>
<tr>
<td></td><td>2</td><td></td>
</tr>
<tr>
<td></td><td>1</td><td></td>
</tr>
<tr>
<td></td><td>4</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>44</td>
<td></td>
</tr>
<tr>
<td></td><td>0</td><td></td>
</tr>
<tr>
<td></td><td>1155</td><td></td>
</tr>
<tr>
<td></td><td>1234548775564</td><td></td>
</tr>
</tbody>
</table>
make text-align:right and padding-right:5emin td css selector
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
padding-right: 4em;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
<style>
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
float:right; <!--added this-->
margin-right:50px; <!-- and this-->
}
</style>
I added float:right in td
adjust the margin-right value to your desired value;
One option is to change the display property for td elements to block
You can then set a max-width to bring td elements to the center of tr elements.
Once that's done you set the text-align property to right for td elements to make the numbers start from the right hand side.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
display: block;
max-width: 70%;
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Wrap your numbers with element(span) inside the td and add the text align right styles on it.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td span {
width: 150px;
text-align: right;
background: beige;
display: inline-block;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>45</span></td>
</tr>
<tr>
<td><span>2</span></td>
</tr>
<tr>
<td><span>18923538273</span></td>
</tr>
<tr>
<td><span>9823</span></td>
</tr>
</tbody>
</table>
.table {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
background-color: red;
flex-direction: column;
}
div {
text-align: right;
}
<body>
<div class='table'>
<div>
<div>1</div>
<div>1111111</div>
<div>1111111111111</div>
</div>
</div>
</body>
text-align :right ----> pulls the text into right end
padding-right: 50% or padding-left : 50% ----> add space from the right or left to center
use 45 - 49 percentage in padding to make a crisp center alignment depends on your requirement
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
padding-right: 50%;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
This is how my webpage looks:
-------------
-------------
Image here
-------------
-------------
Table1 here
Table2 here
Table3 here
I was hoping to make it look like this:
-------------
-------------
Image here Table1 here
-------------
-------------
Table2 here Table3 here
HTML:
<img class="image" src="somesrc">
<table id="table-1">
<tbody>
<tr class="row-1">
<td class="column-1">something</td><td class="column-2">something</td>
</tr>
<tr class="row-2">
<td class="column-1">something</td><td class="column-2">something</td>
</tr>
The same for the other 2 tables but with different ID
CSS:
.image {
height: auto;
width: 250px;
}
#table-1, #table-2, #table-3 {
width: 40%;
font-weight: bold;
}
#table-1 .column-1, #table-2 .column-1, #table-3 .column-1 {
background-color: #000000;
color: #fff;
width: 40%;
}
I have no idea how to move table1 to the desired position. Each table has a heading above it too.
Try this code:
<div class="image">
<img src="somesrc">
</div>
<table id="table-1">
<tbody>
<tr class="row-1">
<td class="column-1">something</td><td class="column-2">something</td>
</tr>
<tr class="row-2">
<td class="column-1">something</td><td class="column-2">something</td>
</tr>
CSS:
.image {
height: auto;
width: 250px;
float:right;
}
#table-1, #table-2, #table-3 {
width: 40%;
font-weight: bold;
}
#table-1 .column-1, #table-2 .column-1, #table-3 .column-1 {
background-color: #000000;
color: #fff;
width: 40%;
float:left;
}
I added a div with the class image and deleted the class in <img> then i just added a float:right to that div. and a float:left to the table. Check the fiddle: https://jsfiddle.net/amsuh474/2/
You need to float your elements. Sample below.
table {
width: 40%;
margin: 10px;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
.image {
height: 100px;
border: 1px solid;
margin: 10px;
width: 40%;
}
.pull-left {
float: left;
}
.clearfix {
clear: both;
}
<div class="image pull-left">IMAGE</div>
<table class="pull-left">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<div class="clearfix"></div>
<table class="pull-left">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<table class="pull-left">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
I'm not 100% sure how the visual spacing between the image and the table should be vs the two tables below but I'm going to give you an example using a grid to layout page elements. You can roll your own or use a grid from any number of CSS frameworks like Bootstrap, Skeleton, Foundation etc.
* {
box-sizing: border-box;
}
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
}
.row {
margin-left: -10px;
margin-right: -10px;
overflow: hidden; /* cheap clearfix - should use: http://nicolasgallagher.com/micro-clearfix-hack/ */
}
[class^="col-"] {
float: left;
padding-left: 10px;
padding-right: 10px;
}
.col-half {
width: 50%;
}
<div class="row">
<div class="col-half">
<img src="http://placehold.it/250x175/ffcc00/?text=example">
</div>
<div class="col-half">
<h2>Table 1</h2>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-half">
<h2>Table 2</h2>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
<div class="col-half">
<h2>Table 3</h2>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
</div>
Wrap the image and a table in an element (in the example it's <section>) and the remaining 2 tables in another block element(section>). Then wrap everything in another element (<main>). Apply display: table-* CSS properties to each as the Snippet demonstrates.
#main {
display: table;
table-layout: fixed;
width: 100vw;
height: 100vh;
}
section {
display: table-row;
}
figure,
table {
width: 50%;
height: 100%;
display: table-cell;
border: 2px dashed red;
}
td {
width: 25%;
border: 1px solid black;
}
img {
max-width: 100%;
margin-bottom: calc(50% - 25vh);
}
figcaption {
text-align: center;
margin: 0 0 5px 0;
border: 1px solid blue;
}
<main id='main'>
<section>
<figure>
<figcaption>IMAGE</figcaption>
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
</figure>
<table>
<caption>TABLE1</caption>
<tbody>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
<td>Tables will stretch with their content accordingly.</td>
</tr>
<tr>
<td>TD</td>
<td>This content is added just to fill out the rest of the dead space.</td>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<td>This content is added just to fill out the rest of the dead space.</td>
<td>TD</td>
<td>TD</td>
<td>TD</td>
</tr>
</tbody>
</table>
</section>
<section>
<table>
<caption>TABLE2</caption>
<tbody>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
<td>This content is added just to fill out the rest of the dead space.</td>
</tr>
<tr>
<td>TD</td>
<td>The maximum width of each table is 50% of viewport</td>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<td>This content is added just to fill out the rest of the dead space.</td>
<td>TD</td>
<td>TD</td>
<td>TD</td>
</tr>
</tbody>
</table>
<table>
<caption>TABLE3</caption>
<tbody>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
<td>This content is added just to fill out the rest of the dead space.</td>
</tr>
<tr>
<td>TD</td>
<td>This content is added just to fill out the rest of the dead space.</td>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
<td>This content is added just to fill out the rest of the dead space.</td>
</tr>
</tbody>
</table>
</section>
</main>
I have two tables and one image and I want them to be in one line while using the float attribute.
How can I prevent the image and the right table to jump below the other elements when making the browser window smaller?
before
after
<body>
<div>
<table class="datagrid">
<tr>
<th colspan="2">Test table one</th>
</tr>
<tr>
<td class="label">Test 1:</td>
<td class="value">Text 1</td>
</tr>
<tr>
<td class="label">Test 2:</td>
<td class="value">Text 2</td>
</tr>
<tr>
<td class="label">Test 3:</td>
<td class="value">Text 3</td>
</tr>
<tr>
<td class="label">Test 4:</td>
<td class="value">Text 4</td>
</tr>
</table>
<table class="datagrid">
<tr>
<th colspan="2">Test table two</th>
</tr>
<tr>
<td class="label">Test 1:</td>
<td class="value">Text 1</td>
</tr>
<tr>
<td class="label">Test 2:</td>
<td class="value">Text 2</td>
</tr>
<tr>
<td class="label">Test 3:</td>
<td class="value">Text 3</td>
</tr>
<tr>
<td class="label">Test 4:</td>
<td class="value">Text 4</td>
</tr>
</table>
<img style="float: left; height: 200px;" src="data:image/png;base64,..."/>
</div>
</body>
table.datagrid tr th
{
text-align: left;
padding: 5px 5px;
background: #ebebeb;
}
table.datagrid
{
float: left;
width: 30%;
margin-right: 15px;
}
You can create a responsive layout and set the width of each block to, say, 33%, leaving some room (1%) for the margines.
First of all, I would wrap the image in a div wrapper
<div class="imagery"><img src=""/></div>
Style the image wrapper
.imagery {
float: left;
width: 33%;}
And make sure the image scales appropriately:
.imagery img {
max-width: 100%;
height: auto;
display: block;
}
Then I would set the tables width to 33% and 1% for the margines
.datagrid {
float: left;
width: 33%;
margin-right: 0.5%;}
http://jsfiddle.net/ny86yjm4/
First of all, name your <div> after your <body>. Then, set a min-width rule to that div.
Then, you just set the 2 tables and the image to float to the left.
Let's call your div 'content' for brevity. You also have to give an id to your img element, we'll call this x-img.
HTML:
<body>
<div id="content">
...
<img id="x-img" ... >
</div>
</body>
CSS:
div#content{
min-width: 50em; /* Or whichever, this value is going to be trial and error, you can also use px */
}
table.datagrid, img#x-img{
display: inline;
float: left;
clear: none;
}
Otherwise, you can mess with other values; CSS is a lot of trial and error.