actually i got a problem with the view of a table. I need a horizontal scrollbar in my <td>. For this i found here a solution:
<table style="min-width: 100%; display: block; margin-bottom: 10px; border-collapse: collapse;" class="table table-striped table-hover table-responsive">
<tr class="list" style="width: 100%; margin-top: 5px;">
<td style="display: block; min-width: 100%; margin-bottom: 10px; white-space: nowrap; overflow:auto;" colspan="2">
<?php echo user_view_explorer_form (); ?>
</td></tr>
</table>
But now i got the problem, that some elements of the <td> are very short and some are very long. In case the elements are to short for a width:100%-view, the whole table only shows has the width of the longest element.
I cant find a solution where I can scroll in case of long elements but also got a "width:100%"-table in case of short elements.
Sorry for bad english. Thank you for your help. Stay healthy.
Picture shows you the problem.enter image description here
Applying display: block to a table element (be it table or td) destroys the automatic formating as a table in HTML - it simply doesn't make sense to do that (you could as well work with divs then)
So erase all this display: block instances! To set the table to 100% width, simply use width: 100% on table
To limit the height of a td and make it scroll vertically, you could put a div into that td and apply a fixed height to it. But all inside a working table structure without display: block on any table/tr/td element...
As i understood what you write here, I can offer you, try to wrapper element using for width configuration where you have problem on giving a width. If you write your all code here(including where you have problem) i may help you better than now :)
Related
This is working on Chrome/Edge:
<style>
.o {
width: 1px;
white-space: nowrap;
}
</style>
<table style="width:100%; position: relative; border-collapse: collapse">
<tr>
<td class="o">text no wrap</td>
<th>Head</th>
<td class="o">text no wrap</td>
</tr>
</table>
white-space: nowrap; ... stops wraping
width: 1px; ... auto expend content to minimum needed width
This are the problems:
internet explorer: auto-expand width not working. (customers still use them, although i don't like ie)
So there is a wrap if width is set. Without width tds are to big (empty space) because of the missing minimize to content.
cross-browser: if content is too big, without wrapping, it expands table-witdh over 100%. Better would be a "only wrap if really needed".
side information: i cannot use a fixed layout, because content is filled from a database
You need to respect HTML structure in IE. And not just set randomly your style and table.
And it seems to work fine the same way in all browser for me. ie is indicating : width: 79.98px when you inspect and check the calculated value. So auto expand works on ie 11
You might have more css or html but just as you gave. IE11 is making the job as per capture:
Please see this JSFIDDLE
td.rhead { width: 300px; }
Why doesn't the CSS width work?
<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>
Also, what are the effects of position:fixed, absolute etc have on td widths if any? I am looking for a reason more than a fix. I am hoping to understand how it works.
This may not be what you want to hear, but display: table-cell does not respect width and will be collapsed based on the width of the entire table. You can get around this easily just by having a display: block element inside of the table cell itself whose width you specify, e.g
<td><div style="width: 300px;">wide</div></td>
This shouldn't make much of a difference if the <table> itself is position: fixed or absolute because the position of the cells are all static relative to the table.
http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/
EDIT: I can't take credit, but as the comments say you can just use min-width instead of width on the table cell instead.
You're better off using table-layout: fixed
Auto is the default value and with large tables can cause a bit of client side lag as the browser iterates through it to check all the sizes fit.
Fixed is far better and renders quicker to the page. The structure of the table is dependent on the tables overall width and the width of each of the columns.
Here it is applied to the original example: JSFIDDLE, You'll note that the remaining columns are crushed and overlapping their content. We can fix that with some more CSS (all I've had to do is add a class to the first TR):
table {
width: 100%;
table-layout: fixed;
}
.header-row > td {
width: 100px;
}
td.rhead {
width: 300px
}
Seen in action here: JSFIDDLE
The reason it doesn't work in the link your provided is because you are trying to display a 300px column PLUS 52 columns the span 7 columns each. Shrink the number of columns and it works. You can't fit that many on the screen.
If you want to force the columns to fit try setting:
body {min-width:4150px;}
see my jsfiddle: http://jsfiddle.net/Mkq8L/6/
#mike I can't comment yet.
The reason, is, because you did not specify the width of the table, and your whole bunch of td's are overflowing.
This for example, i've given the table a width of 5000px, which I thought would fit your requirements.
table{
width:5000px;
}
It is the exact same code you provided, which I merely added in the table width.
I believe what is happening, is because your TD's are way past the default table width. Which you could see, if you pull out about 45 of your td's in each tr, (i.e. the code you provided in your question, not jsfiddle) it works exactly fine
Try this it work.
<table>
<thead>
<tr>
<td width="300">need 300px</td>
Try to use
table {
table-layout: auto;
}
If you use Bootstrap, class table has table-layout: fixed; by default.
My crazy solution.)
$(document).ready(function() {
$("td").each(function(index) {
var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
$(this).html(htmlText);
});
});
Use table-layout property and the "fixed" value on your table.
table {
table-layout: fixed;
width: 300px; /* your desired width */
}
After setting up the entire width of the table, you can now setup the width in % of the td's.
td:nth-child(1), td:nth-child(2) {
width: 15%;
}
You can learn more about in on this link: http://www.w3schools.com/cssref/pr_tab_table-layout.asp
If table width is for example 100%, try using a percentage width on td such as 20%.
Wrap content from first cell in div e.g. like that:
HTML:
<td><div class="rhead">a little space</div></td>
CSS:
.rhead {
width: 300px;
}
Here is a jsfiddle.
You can also use:
.rhead {
width:300px;
}
but this will only with with some browsers, if I remember correctly IE8 does not allow this. Over all, It is safer to just put the width="" attribute in the <td> itself.
What is the best way to make a table (not necessarily using the table tag) where each row has a fixed height and fills the entire available horizontal space and one of the columns has a dynamic width that shows as much text as possible without line breaking? Like Gmail and Google Reader.
I really like that way of presenting information. The expandable fixed height row is a good way to scan through a list of data, IMHO.
See: http://jsfiddle.net/gtRnn/
<p>What is the best way *snip*</p>
p {
border: 1px dashed #666;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
Each property is doing something useful:
white-space: nowrap forces the text to stay on one line.
overflow: hidden stops this.
text-overflow: ellipsis works in "all browsers", except Firefox (support is planned)
border is there for no reason.
The other answers don't work within a table as seen here: http://jsfiddle.net/gtRnn/8/ - The link also contains the right way to do it.
The solution is to set the table-layout style on the table to fixed and to give each column a percent or absolute width. table-layout: fixed; tells the browser not to calculate the table's width based on the contents but from explicit widths given to each cell.
Working Example:
http://jsfiddle.net/gtRnn/8/
Code:
<style type="text/css">
.my-table {
/* This is important for ellipsis to work in tables.
Don't forget to explicitly set the widths on all columns. */
table-layout: fixed;
width: 100%; /* The table must be given a width. */
}
.overflow-ellipsis {
overflow: hidden; /* Ellipsis won't work without this. */
text-overflow: ellipsis; /* The most important part */
}
</style>
<table border="1" class="my-table">
<tr>
<td width="10%">1.</td>
<td width="90%" class="overflow-ellipsis">
In this TD, wrapping still occurs if there is white space.
ButIfThereIsAReallyLongWordOrStringOfCharactersThenThisWillNotWrapButUseEllipsis
</td>
</tr>
<tr>
<td width="10%">2.</td>
<td width="90%" class="overflow-ellipsis" style="white-space:nowrap;">
In this TD, wrapping will not occur, even if there is white space.
</td>
</tr>
</table>
Mixing percent widths and absolute width's doesn't work correctly (in Google Chrome at least).
The key being the overflow: hidden; and the white-space: nowrap;
<div style="width: 200px; overflow: hidden; white-space: nowrap;">some long text.............asdfasdf........</div>
I have a table I am using as a toolbar on a web page. It works great in all browsers except for IE7. The issue is that it expands the table to fit the contents (pushing the content off the screen) unless I specify "table-layout: fixed" in the CSS. When I set the table layout to fixed it makes all the cells the same size, but I want them to size automatically to fit the content (and word wrap if needed). Setting "width: auto" on the cell does not do anything.
Here is the HTML:
<table id="ToolbarTable" cellspacing="0px">
<tr>
<td class="ToolbarCell" align="center">
Button1
</td>
<td class="ToolbarCell" align="center">
Button2 Button3 Button4
</td>
<td class="ToolbarCell" align="center">
Button5 Button6 Button7 [Button8 Button9 - not always visible]
</td>
</tr>
</table>
And the CSS:
#ToolbarTable
{
margin-top: 1px;
width: 100%;
min-height: 24px;
table-layout: fixed;
word-wrap: break-word;
}
#ToolbarTable td
{
min-width: 50px;
width: auto;
border: solid 1px #000000;
}
In IE7, how can I make a table a specific width (and have IE7 honer it), while still letting the width of the table cells resize automatically?
EDIT: added code examples.
Try using min-width in connection with a set width. I believe this combination should work with IE 7.
You need to set a table width for the entire table.
And otherwise there's only one option, setting the table width's manually (easy to gather by using developer tools that most modern browsers include (IE8+, FireFox, Chrome, Safari, etc.), you can read the width's there). Otherwise I wouldn't know.
Although I had spaces between the buttons I also had some spaces there and it was preventing the word wrap and causing the table width to exceed the width I specified. Removing from between the buttons fixed the problem. Each was surrounded by a space (I just wanted to add more space) and all other browsers were doing the line break correctly, but IE7 must either remove the extra spaces or assume they should be spaces.
I have a table with a height of 100% and a fixed position. Within it I want to have a div with height of 100% that gives scrolling on overflow.
The trouble is the table starts behaving strangely if I put more content in the div than its height can take.
The scroll do not appear as it is supposed to, and instead the table gets larger than the screen can take.
Please just take my word for it that I do need the div to be in a table; it's for layout purposes that I have not bothered blotting my problem description with.
But that is my only restriction: the outermost element needs to be a table, and somewhere within it I want the div. If you have a suggestion where you embed the div in other elements, then please tell me!
But I want your suggestion to have the desired result in at least firefox.
And to clarify one more time: the result I want is that if the div contains too much content for its height, then the scrolls should appear while the outer table stays put.
I give you the code here so you can test it.
<table style='position: fixed; left: 0px; top: 0px; height: 100%;'>
<tr><td style='height: 100%;'>
<div style='height: 100%; overflow: auto;'>
FRODO!
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
...
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</td></tr>
</table>
Thanks guys!
EDIT: Response to your answers.
Valamo: overflow=auto on a div means that scrolls are not visible until they are needed, so they should work. But just to be sure I had already tried overflow=scroll, along with many other things. I fail to see how setting doctype will change the situation.
Ettiene: Set a div to height=100% and then put another div within it and set its height=100% and overflow=auto, then I have no problems with the inner div; when its content is too much it will show scrolls while the outer div stays put. But if you replace the outer div with a table then you gonna have problems. So merely setting element heights to 100% is not the issue.
Any more ideas? :-)
Added some css to your original example:
<table style='position: fixed; left: 0px; top: 0px; height: 100%; display: block; overflow: auto; position: fixed;'>
<tr><td style='height: 100%; padding: 0 1.5em;'>
<div style='height: 100%; overflow: auto;'>
FRODO!
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
...
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
...
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
...
</div>
</td></tr>
</table>
The overflow: auto and the display: block on the table are there for Firefox et al. The overflow: auto on the div is there for IE.
<table style="position: absolute;width: 100%;height: 100%;">
<tr>
<td >
<div style="height: 100%;postion:relative">
Testing Charactors
</div>
</td>
</tr>
</table>
use position:relative css parent height get.
To have the content scroll, you need to use overflow:scroll;
Also make sure you use a doctype.
I'm thinking that at least one of your container elements, i.e. the table or the div should have a height value set other than in %. When is the content too much for something with height of 100%?
You may try 'min-height', but this does not work on IE. ;-)
In general I recommend to avoid using 100% height div's.
Have a look at the question Div 100% height works on Firefox but not in IE, which has a similar problem.
you could try min-height, and in IE use the !important hack
Not sure if I'm doing it wrong, but using percentage for height on <div> in tables seems to be completely ignored. Behaviour is consistent regardless of %. I only manage to shrink the div with height specified in pixels.
And BTW, doctype specifies boxmodel, which could affect how this scenario is handle (however I don't think it does). (Read more: http://www.quirksmode.org/css/quirksmode.html)
I was able to make this work with nested tables, for a current project. The Google Earth plugin was in a div that needed to fill the entire screen and resize accordingly. I gave both nested tables and all involved table cells an ID and set all of their heights on resize:
$(function() {
$(window).resize(function() {
$('#main_table').height($(window).height() - $('#main_table').offset().top);
$('#main_td').height($(window).height() - $('#main_td').offset().top);
$('#main_table2').height($(window).height() - $('#main_table2').offset().top);
$('#main_td2').height($(window).height() - $('#main_td2').offset().top);
$('#map_canvas').height($(window).height() - $('#map_canvas').offset().top);
});
$(window).resize();
});
Works more than good enough for my project in IE8 and Chrome.