I have two tables. The left table should have an auto width so that its flexible based on its contents. The right table I need to fill the remaining width of the containing div.
I understand that I can do this by setting table.b to display: block, but the problem with this is that it has no effect in IE9 and below. I need a solution that works down to IE6 (or as close as possible).
table.a {
background-color: blue;
float: left;
}
table.b {
background-color: red;
/* display: block; Can't do display block because setting table as block on <= IE 9 doesn't work */
}
<table class="a">
<tr>
<td>Hello1</td><td>Test1</td>
</tr>
</table>
<table class="b">
<tr>
<td>Hello2</td><td>This table should fill remaining width</td>
</tr>
</table>
This solution would help you,
Wrap each''s with separate ''s. Make the left table wrapper '.table1' as float left and right table wrapper '.table2' as overflow hidden. Tada!!
https://jsfiddle.net/raaj_obuli/jt71ywwm/1/
body {
margin: 0;
padding: 0;
}
.table1 {
float: left;
background: #bbb;
}
.table2 {
overflow:hidden;
background: #afa;
}
<div class="table1">
<table class="a" >
<tr>
<td>Hello1</td><td>Test1</td>
</tr>
</table>
</div>
<div class="table2">
<table class="b" width="100%">
<tr>
<td>Hello2</td><td>This table should fill remaining width</td>
</tr>
</table>
</div>
Don't put display block directly to the table just add div around the table and float the div
Try this Sample it may works for you
herehttp://codepen.io/anon/pen/jPBbrW
Related
I'm trying to make a 2 columns table with the following properties :
the table must fit to its parent container
the first column must fit to its content
the second column content must be horizontally scrollable if it
exceed the table width.
► I began with the following code :
(css here is just to "see" the main container and the table - width: 500px is just for the example, it could be any value)
.main {
width: 500px;
border: 1px solid black;
}
table {
background: rgba(0,0,0,0.5);
}
<div class="main">
<table>
<tr>
<td class="one">content_1</td>
<td class="two">
<div class="content">short string</div>
</td>
</tr>
<tr>
<td class="one">content_2</td>
<td class="two">aVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongStringWithoutSpaces</td>
</tr>
</table>
</div>
Point 1 is not ok : The table does not fit to its container
Point 2 is ok : first column fit to its content
point 3 not ok : as the table does not fit its container, I can't apply an overflow: auto for now
► the only way I found to make the table fit its container is to add the following css properties : table-layout: fixed & width: 100%
then I can add width:100%, display: inline-block & overflow: auto to the second column to make the content scrollable if it exceed the table width
.main {
width: 500px;
border: 1px solid black;
}
table {
background: rgba(0,0,0,0.5);
table-layout: fixed;
width: 100%;
}
.two {
width:100%;
display: inline-block;
overflow: auto;
}
<div class="main">
<table>
<tr>
<td class="one">content_1</td>
<td class="two">
<div class="content">short string</div>
</td>
</tr>
<tr>
<td class="one">content_2</td>
<td class="two">aVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongStringWithoutSpaces</td>
</tr>
</table>
</div>
Point 1 is now ok : The table fit to its container
Point 2 is not ok anymore : table-layout: fixed makes the two columns
point 3 now ok : the content of the second column is scrollable if its too long
► So now I'm looking for a solution to have the 3 points OK.
to get the closest to wha I need, I set width: 50px to the .one class, but in my project I can't do that as I have several tables with differents content size in the first column, so I need the first column's size to be set automatically to fit to the content as in the first snippet.
Any help ?
you can use word-break:break-all for .two
.main {
width: 500px;
border: 1px solid black;
}
table {
background: rgba(0,0,0,0.5);
width: 100%;
}
.two{
word-break:break-all;
}
<div class="main">
<table>
<tr>
<td class="one">content_1</td>
<td class="two">
<div class="content">short string</div>
</td>
</tr>
<tr>
<td class="one">content_2</td>
<td class="two">aVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongStringWithoutSpaces</td>
</tr>
</table>
</div>
I have a page with two panels. Second panel contains some large table so even with wrapped content it can't be displayed on full width window. Than I've added a horizontal scroll to fix this problem but it seems like div doesn't want to fit large table size.
Fiddle link
After some research I've found how to force second panel to fit the table size with this css change:
.pane {
display: table;
}
updated fiddle link
But there is another issue. The width of first and second panels are different. How to force the first panel to take all avaliable width even if it hidden with horizontal scroll?
Is there any pure html/css solution for this?
As advised, use display:table;, it will allow container to shrink/expand according to content and beyond window's size.
But since you need also an overflow, you may add an extra wrapper in between to allow those children to grow beyond the window's width and match to the widest one, i gave it .buffer as a classname to give it some meaning:
example:
.list {
overflow-x: auto;
}
.buffer {
display: table;
}
.pane {
border: 1px solid red;
margin: 15px 0;
}
.pane .head {
width: 100%;
background: #959595;
}
.pane .body {
width: 100%;
}
.pane .body table {
border: 1px solid green;
}
<div class="list">
<div class="buffer">
<!-- this a buffer container to allow to beyond window's width if displayed as table element *-->
<div class="pane">
<div class="head">
Pane 1 header
</div>
<div class="body">
Some body
</div>
</div>
<div class="pane">
<div class="head">
Pane 2 header
</div>
<div class="body">
<table width="100%">
<tbody>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>some_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super big content</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
https://jsfiddle.net/8cepsL09/6/
Its NOT a pure html/css solution but it works
I've used jquery to get the width of the second and apply it to the first
$('#pane1').width($('#pane2').width())
.list {
overflow-x: auto;
}
.pane {
border: 1px solid red;
width: 100%;
margin: 15px 0;
display: table;
}
.pane .head {
width: 100%;
background: #959595;
}
.pane .body {
width: 100%;
}
.pane .body table {
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<div class="pane" id="pane1">
<div class="head">
Pane 1 header
</div>
<div class="body">
Some body
</div>
</div>
<div class="pane" id="pane2">
<div class="head">
Pane 2 header
</div>
<div class="body">
<table width="100%">
<tbody>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>some_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super big content</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
You'll need to add in jquery to your site and add id's to your panes (you can use other ways of accessing your panes, but I find that ids are easist)
you can add this to your css
table {
border-collapse:collapse; table-layout:fixed;
}
table td {
border:solid 1px #fab; width:25%; word-wrap:break-word;
}
and adapt the width to the amount of columns.
EDIT: fiddle.js here
It would also be possible to play around with something like e.g.
padding-right: 3000px;
margin-right: -3000px;
which would extend the space used by the element.
See https://www.sitepoint.com/css-extend-full-width-bars/ for more details...
The question is not very short, but it's easy to understand.
Here is the jsFiddle
I have two nested tables, like that:
Here is the markup:
<table class="outer">
<tr>
<td></td>
<td>
<table class="inner">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
<style>
table, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100%;
}
.outer {
height: 100px;
}
.inner {
background-color: #ccc;
height: 50px;
}
</style>
The 1st strange thing
Then, I want to add a negative horizontal margin to the inner table:
.inner {
margin: 0 -10%;
}
The expected output is something like this:
But instead, I get this:
The problem may be solved by placing the inner table in the div:
<!-- outer table -->
<div class="wrapper">
<table class="inner-wrapped">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<!-- outer table -->
<style>
.wrapper {
margin: 0 -10%;
}
.inner-wrapped {
background-color: rgb(0,200,0);
height: 50px;
}
</style>
The 2nd strange thing
If I set negative horizonal margin -10px (previously we used percents, not pixels), then in additional that table moves only to the left (like in the first case), it sigifically reduces in the width:
.inner {
margin: 0 -10px;
}
The questions
Why both this stange things occur?
What is a way to resolve it? Is it a good practise to simply use a wrapper, like I do, or I should use another, more clever way?
If main table is width:100%; it will expand all the way and inner table will take the initial 100% for reference. negative margin won't expand it as long as no content makes it to .
it will work if :https://jsfiddle.net/md2tx2d4/2/
.inner { margin:0 -10%; width:120%;}
or if you let it live without width and let it grow from its content
table { }
td {width:200px;/* instead real content missing here */}
https://jsfiddle.net/md2tx2d4/1/
I have searched quiet a bit and found a lot of css that I tested but margin: 0 auto; has not worked and. I cannot get my footer to stay center and also at the bottom. I can get it to the bottom and I can get it centered but not both.
Here is the HTML
<div align="center">
<table class="copyrightbar">
<tr>
<td class="noborder">
<img class="ledge" src="images\lefthalfcircle.png">
</td>
<td class="noborder" >
<img class="copyrightimg" src="images\copyright.png">
</td>
<td class="noborder">
<img class="redge" src="images\righthalfcircle.png">
</td>
</tr>
</table>
</div>
Here is the CSS
.copyrightbar
{
border-collapse: collapse;
border: 0px;
padding: 0px;
float: left;
position: fixed;
bottom: 10px;
display:block;
}
I am not sure why it won't stay centered or what I am doing wrong. Right now the thin is set up to stay at the bottom only.
Try this jsfiddle
I know the images aren't actually showing, but it should display as you required.
HTML:
<div class="wrapper">
<table class="copyrightbar">
<tr>
<td class="noborder">
<img class="ledge" src="images\lefthalfcircle.png">
</td>
<td class="noborder" >
<img class="copyrightimg" src="images\copyright.png">
</td>
<td class="noborder">
<img class="redge" src="images\righthalfcircle.png">
</td>
</tr>
</table>
</div>
CSS:
.wrapper {
position: fixed;
bottom: 10px;
width: 100%;
}
.copyrightbar {
margin: 0 auto;
border-collapse: collapse;
border: 0px;
padding: 0px;
}
What is the point to using float:left ? If you want it centered, floating this entire element to the left serves no purpose since it does the exact opposite of what you want.
However, if you want to keep it, then your wrapper div should be given an id, lets say id="footer" then use this css
#footer {
width:400px (not sure if that is too wide or not, you can play around with it until it is the right width)
margin: 0 auto;
}
Add a class or ID to the wrapper div. Then use CSS to place it at the bottom using `position: fixed'.
Then set a width on your table (via CSS) and use the margin: 0 auto declaration you mention above. (Oh and remove position: fixed from the table)
May be because your CSS file has { float: left; }?
I have a table, with many tds. I want to display a div behind this to give the appearance of it having rounded corners. I have called the Div within a th. Here is a jsFiddle example of the problem.
I thought I could do it using position: realtive; and z-index: -100; yet it doesn't seem to be what I want.
Thanks to anyone for any help.
I think you’ll need a different approach. For the <div> to be the same height as the <table>, you’ll need the <div> to wrap the table:
<div>
<table>
....
</table>
</div>
That’ll also make the <div> appear “behind” the <table> without fiddling with z-index.
From your jsFiddle example, I think you only want the background behind one table column? To achieve this, you’ll need to:
fix the width of all the columns in your <table>
set the width of the <div> to the width of the column you want it to be the background for (or a little wider)
set the left margin of the <div> to the width of the other columns in the <table>
set the left margin of the <table> to minus the width of the other columns in the table.
Maybe something like this?
<div class="compare-rounder">
<table>
<thead>
<th class="price">Price</th>
<th class="product">Product</th>
</thead>
<tbody>
<tr>
<td>$4000</td>
<td>for this</td>
</tr>
</tbody>
</table>
</div>
table,
table td,
table th
{
border: 1px #000 solid;
}
table
{
margin-left: -500px;
}
.product
{
width: 500px;
}
.price
{
width: 50px;
}
.compare-rounder
{
width: 60px;
background-color: #f0f; /*bright pink*/
border: 1px #ccc solid !important;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin-left: 500px;
}
You should do this I guess :
<div class="compare-rounder">
<table>
...
</table>
</div>