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;
}
Related
I have created an application in angularjs using ngtable, since I need the table head to be fixed I tried using position:fixed; so that the head is fixed but the problem is that now the body and head overlaps also the width of the table is not expanding
My code is as given below
JSFiddle
html
<div ng-controller="IndexCtrl">
<table border="1" ng-table="mytable" id="myTable" class="ScrollArea">
<tbody ng-repeat="peop in $groups">
<tr ng-repeat="people in peop.data">
<td sortable="id" data-title="'Id'">{{people.id}}</td>
<td sortable="desig" data-title="'Desig'">{{people.desig}}</td>
<td sortable="name" data-title="'Name'">{{people.name}}</td>
<td sortable="place" data-title="'Place'">{{people.place}}</td>
</tr>
</tbody>
</table>
</div>
css
#myTable thead
{
position:fixed;
}
.ScrollArea
{
display: block;
height: 200px;
overflow-y: scroll;
}
you have to remove position fixed in #myTable thead
and remove display: block; in .scrollArea.
Add cellpadding to change width of the table. and add top/bottom to the thead to solve the overlap.
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/
Conclusion: use JavaScript to calculate max-width of first cell.
Example:
<table>
<tr>
<td style="white-space:nowrap; overflow: hidden">Some text. It maybe very long and should be shortened if there is no more available width in table</td>
<td>This shall always be visible and should not have any space between this and the previous cell, but if the two cells are thinner than the table I want my white-spaces after the end of this cell</td>
</tr>
</table>
What I don't know is the width of cell2 or the width of the table
What I want to achieve is to have a max-width on the first cell, based on available space without using JavaScript. Not sure if it even is possible.
Example where the text is short:
|Some short text|Her comes a new text |
Example where the text is too long:
|This is some text which might s|Her comes a new text|
Its a little hard to determine exactly what you want- perhaps something like this?
HTML
<div>
<span>Something quite long that should exceed the table cell.</span>
<span>here is some moreSomething quite long that should exceed the table cell.Something quite long that should exceed the table cell.</span>
</div>
CSS
div{
margin:0;
padding:0;
display:table;
table-layout: fixed;
width:100%;
max-width:100%;
}
span{
padding 0 20;
margin:0;
display:table-cell;
border:1px solid grey;
}
span:first-child{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
span:last-child{
width:auto;
}
You can use the selector :first-child to select the first <td> inside a table:
table td:first-child {
width: 100%;
}
Is this what you want?
All I did was add a max-width to the cell that you want a max width on.
td:first-child {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
}
Simplest solution without JavaScript is:
<table>
<tr>
<td style="width:80%;">Some text. It maybe very long and should be shortened if there is no more available width in table</td>
<td>This shall always be visible and should not have any space between this and the previous cell, but if the two cells are thinner than the table I want my white-spaces after the end of this cell</td>
</tr>
</table>
Apologies, if I do not understand what exactly you want!
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 peculiar problem. Lets start with a code snippet:
...
<td>
<div class="scrollable">...</div>
...other cell content...
</td>
...
Now I want the table render as if the div.scrollable wouldn't take any horizontal space (i.e. the div.scrollable doesn't push on the right side of the table), but show the horizontal scrollbar (on the div.scrollable, not on the whole cell) if the div.scrollable is wider then the containing cell. Is that possible to do via CSS?
Thanks!
Using your basic example you would likely need a set width on the td and to use overflow and overflow-y. overflow-y is CSS3 only but you didn't specify IE8 and below.
EDIT sorry you also need display:block; on the td
td { display: block; width: 50px; }
.scrollable { overflow: scroll; overflow-y:hidden; }
UPDATE:
See the jsfiddle example, notice the 100% width on the table and the fixed layout.. thats to stop the example from just adding a horizontal scroll to the viewport and carrying on.
http://jsfiddle.net/MMeTe/4/
Credit goes to Pricey as his jsfiddle example answers the question, but to have the answer with the code here, I attach it bellow:
...
<style type="text/css>
.mytable {
table-layout: fixed;
}
.scrollable{
overlow-y: auto;
}
</style>
...
<table class="mytable">
<tr>
<td>
<div class="scrollable">...</div>
other content...
</td>
</tr>
</table>