I want to show two table in same line. Then I'm using float: left; Like this.
If those tables width more than the container I use overflow: hidden; to hide the surplus.
Overflow hidden working perfect but the table not stay at the same line.
http://jsfiddle.net/bULcB/3/
How can I fix that. I want the table stay at the same line.
Add a container div to wrap the two tables. And then make its width great enough to hold the two tables in a line. The overflow part of the container will not be shown as the parent div has specified overflow: hidden;.
See updated example on jsFiddle
Give position: relative to your parent element and give position: absolute; top: 0; left: 100px; to your second child element (remove float property from second child element).
Working Fiddle
or else
Give White-space: nowrap to your parent element and give display: inline-block to your child elements instead of float: left.
Works only in latest version of browsers.
Working Fiddle
div style="width: 300px; overflow: hidden; ">
<table cellspacing="0" cellpadding="0" style="float: left; background-color:red;">
<tr>
<td>First Table</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" style="float: left; background-color:yellow;">
<tr>
<td>Second Table</td>
</tr>
</table>
Related
I am trying to build a table that contains a td which has a width set in percentage and when overflown a horizontal scrollbar.
Unfortunately I don't manage to make this happen.
http://jsfiddle.net/ne45s2wf/1/
HTML
<div class="container">
<table>
<tbody>
<tr>
<td>cell 1
</td>
<td>cell 2
</td>
<td class="too-long">cell 3 loooooooooooooooooooooooooooooooooooooooooooong
</td>
</tr>
</tbody>
</table>
</div>
CSS
.container {
position: relative;
max-width: 500px;
background-color: red;
}
table {
width: 100%;
}
td.too-long {
background-color: darkgreen;
display: inline-block;
width: 20%;
overflow-x: scroll;
}
First thing I wonder is what is the td-width in percentage relative to? And is it possible to set it to be relative to the table?
I would set a maximum width in percentage for the td with overflow hidden. While this works for the td, the parent containers do not align their width to the td child when its width is set with percentage. The parents width is as if the child did not have any width set. Furthermore the table now is not "responsive" any more.
I would take a look at bootstrap. I am not sure exactly what you mean but it seems like you are having trouble with your tables overflowing. Bootstrap has responsive tables which will scroll in the way you specify at small sizes. Take a look at this:
http://getbootstrap.com/css/#tables-responsive
Given a <table> with one or many <td>'s with text that is wider than the parent <div>, is there a way to make the table scroll without making the parent <div> use overflow:auto, and still have the table retain 100% width?
I'm hoping for a CSS solution I can apply to ONLY the <table> element (or its children).
Example: See JSFiddle Demo.
CSS:
<style>
#wrapper {
width: 250px;
/* looking for solution that doesn't use overflow auto here */
}
table {
border-collapse: collapse;
}
td {
border:1px solid #ccc;
padding: 3px;
}
</style>
HTML:
<div id="wrapper">
<p>Table should scroll, but not this text.</p>
<table>
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td>..</td>
<td>..</td>
<td>....................................................................................</td>
</tr>
<tr>
<td>..</td>
<td>..</td>
<td>..</td>
</tr>
</tbody>
</table>
</div>
Not modifying the parent div is important in my project because <table>'s are in a <div> with a bunch of other content that I do not want to scroll with it. While I could add a wrapper <div> to all tables in my project, I would also have to rewrite a JavaScript plugin (has to do with paging), which I am trying to avoid.
You can use overflow: scroll on the table itself if you make it display as block:
table {
display: block;
overflow: scroll;
}
Edit:
As the comments below suggest, use td { width: 1%; } as a somewhat-messy way to get the table to still be 100% width if the content is narrower than the wrapper.
Fiddle: http://jsfiddle.net/94g53edb/12/
I am just a newbie in css and html, but if I can give my opinion, so there will be two ways in achieving that:
You can set the <p> to the fixed position,
or
You can create another wrapper for the table.
:)
[I'm adding a second answer because the comments on my first answer are going in a different direction than my new answer, and I don't want to derail that train]
Set the table to display: block and overflow: scroll, and give each of the cells a min-width (in pixels) to make up 100% of the container's width.
Here's what it looks like with table content less than the container width: http://jsfiddle.net/94g53edb/8/
Because the cells have only a min-width and not a fixed width, they can expand as needed, pushing the table to greater than the width of the container, and the table will scroll: http://jsfiddle.net/94g53edb/9/
This question may look stupid for some. My apologies, I am not that savy with CSS.
Now, I have a table with 2 columns (needs to be equal). The table width is put to 100% and needs to be resized with the page.
The header, it's ok. It only contains 2 cells with 2-3 words, so there are no problems.
Now, each of the following cells contain quite some big text and I need to be displayed as it is (no wrapping).
What I did:
<style>
.contentDiv
{
display: inline-block;
overflow-x:auto;
overflow-y:hidden;
white-space: nowrap;
white-space: nowrap;
}
</style>
<table style="width:100%">
<th>
<tr><td with="50%">head 1</td><td width="50%">head 2</td></tr>
</th>
<tbody>
<tr>
<td><div class="contentDiv">big-text-here</div></td>
<td><div class="contentDiv">big-text-here</div></td>
</tr>
</tbody>
</table>
The bottom line is I want the table to have the full width, the inner content-cell to have half of the table width and the text (no matter how big it is) not to alter the layout (scrollbars should appear if the content is bigger than the required surface).
Thanks!
I kinda didn't know what you mean, but I am sure you mean this http://jsfiddle.net/mDXb5/ also you had some problems with your code above that you should edit. e.g:
</table> tag is missing instead you use </tr> which is wrong
This should eliminate any wrapping.
td { position: relative; }
.contentDiv
{
display: inline-block;
overflow-x:auto;
overflow-y:hidden;
white-space: nowrap;
white-space: nowrap;
position: absolute;
}
I am trying to show some details of a receive in a table.
I want that table to have a min height to show the products. So if there is only one product, the table would have at least some white space at the end. In the other hand if there are 5 or more products, it won't have that empty space.
I have tried this CSS:
table,td,tr{
min-height:300px;
}
But it is not working.
height for td works like min-height:
td {
height: 100px;
}
instead of
td {
min-height: 100px;
}
Table cells will grow when the content does not fit.
https://jsfiddle.net/qz70zps4/
It's not a nice solution, but try it like this:
<table>
<tr>
<td>
<div>Lorem</div>
</td>
</tr>
<tr>
<td>
<div>Ipsum</div>
</td>
</tr>
</table>
and set the divs to the min-height:
div {
min-height: 300px;
}
The solution without div is used a pseudo element like ::after into first td in row with min-height. Save your HTML clean.
table tr td:first-child::after {
content: "";
display: inline-block;
vertical-align: top;
min-height: 60px;
}
In CSS 2.1, the effect of 'min-height' and 'max-height' on tables,
inline tables, table cells, table rows, and row groups is undefined.
So try wrapping the content in a div, and give the div a min-height
jsFiddle here
<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
<tbody>
<tr>
<td>
<div style="min-height: 100px; background-color: #ccc">
Hello World !
</div>
</td>
<td>
<div style="min-height: 100px; background-color: #f00">
Good Morning !
</div>
</td>
</tr>
</tbody>
</table>
if you set style="height:100px;" on a td if the td has content that grows the cell more than that, it will do so no need for min height on a td.
Tables and table cells don't use the min-height property, setting their height will be the min-height as tables will expand if the content stretches them.
Setting height on table cells only works correctly, if your td is not using box-sizing: border-box. With border-box it will stay the height you set and content will overflow.
Use content-boxor something else.
I ran into this problem because I used a css-resetter.
Simply use the css entry of min-height to one of the cells of your table row. Works on old browsers too.
.rowNumberColumn {
background-color: #e6e6e6;
min-height: 22;
}
<table width="100%" cellspacing="0" class="htmlgrid-table">
<tr id="tr_0">
<td width="3%" align="center" class="readOnlyCell rowNumberColumn">1</td>
<td align="left" width="40%" id="td_0_0" class="readOnlyCell gContentSection">411978430-Intimate:Ruby:Small</td>
I have the following code:
<td style="position: relative; min-height: 60px; vertical-align: top;">
Contents of table cell, variable height, could be more than 60px;
<div style="position: absolute; bottom: 0px;">
Notice
</div>
</td>
This does not work at all. For some reason, the position:relative command isn't being read on the TD and the notice DIV is being placed outside of the content container at the bottom of my page. I have tried to put all the contents of the TD into a DIV such as:
<td>
<div style="position: relative; min-height: 60px; vertical-align: top;">
Contents of table cell, variable height, could be more than 60px;
<div style="position: absolute; bottom: 0px;">
Notice
</div>
</div>
</td>
However, this creates a new problem. Since the height of the contents of the table cell is variable, the notice DIV isn't always at the bottom of the cell. If a table cell stretches beyond the 60px marker, but none of the other cells do, then in the other cells, the notice DIV is at 60px down, instead of at the bottom.
This is because according to CSS 2.1, the effect of position: relative on table elements is undefined. Illustrative of this, position: relative has the desired effect on Chrome 13, but not on Firefox 4. Your solution here is to add a div around your content and put the position: relative on that div instead of the td. The following illustrates the results you get with the position: relative (1) on a div good), (2) on a td(no good), and finally (3) on a div inside a td (good again).
<table>
<tr>
<td>
<div style="position:relative;">
<span style="position:absolute; left:150px;">
Absolute span
</span>
Relative div
</div>
</td>
</tr>
</table>
This trick also suitable, but in this case align properties (middle, bottom etc.) won't be working.
<td style="display: block; position: relative;">
</td>
Contents of table cell, variable height, could be more than 60px;
<div style="position: absolute; bottom: 0px;">
Notice
</div>
With regards to your second attempt, did you try using vertical align ?
Either
<td valign="bottom">
or with css
vertical-align:bottom
also works if you do a "display: block;" on the td, destroying the td identity, but works!