If TBODY height is 300px and the displayed content inside it will be only 50px, it shows empty space at the bottom of the content as from 51PX to 300PX, My intension is If content > 300 using overflow:auto I want to display scrollbar. Please suggest me
<!DOCTYPE html>
<html>
<head>
<style>
div.TableContainerToScroll {
height: 651px;
overflow: auto;
width: 100%;
margin: 15px 0 0 0;
position: relative;
vertical-align:top;
}
html>/**/body div.TableContainerToScroll table>tbody {
overflow: auto;
height: 200px;
overflow-x: hidden;
background-color: #00FF00;
}
div.otherclass {}
</style>
</head>
<body>
<div id="pdata" class="TableContainerToScroll">
<div class="otherclass">
<TABLE cellSpacing=0 cellPadding=0 width="97%" align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=2 width="100%" align=center border=0>
<TBODY>
<TR>
<TD align=center><BR>Sample Text Here<BR></TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR>
</div>
</div>
</body>
The problem is that rows are at least as tall as the content. See Table height algorithms:
The height of a 'table-row' element's box is calculated once the user
agent has all the cells in the row available: it is the maximum of the
row's computed 'height', the computed 'height' of each cell in the
row, and the minimum height (MIN) required by the cells.
And max-height won't help, because
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.
Then, you can't make the contents overflow the cells. However, you can wrap the contents in a container with max-height, and let it overflow:
div {
overflow: auto;
height: 175px;
}
p {
border: 1px solid;
}
p.tall {
height: 400px;
}
table {
border: 1px solid blue;
display: inline-table;
}
<table>
<tr>
<td>
<div>
<p class="tall">I am so tall</p>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div>
<p>I am not tall</p>
</div>
</td>
</tr>
</table>
Related
I want this textarea to be fit inside the table row, by its height & width, so I have used height: 100%; width 100%; on textarea and my decided height width on td. Now textarea's width is ok, but height is not 100%, I am working hard with bellow code ~
Check Image
<style>
body {text-align:center;font-family:Arial;font-weight:400;font-size: 16px;}
table {width:100%;text-align:center;border-collapse: separate;border-spacing: 15px 5px;}
td{padding:20px; box-shadow: 0px 0px 20px #e7e7e7; background-color: #fff;}
textarea{
width:100%;
height:100%;
resize: none;
}
</style>
<table>
<tr>
<td rowspan='2' style='height: 78vh;width: 30%; line-height: 28px;'> Layout - 1
</td>
<td rowspan='2' style='width: 40%;'>
Layout - 2
</td>
<td height='42%' style='width: 30%;'>
<textarea style='height:100% width:100%'></textarea>
</td>
</tr>
<tr>
<td height='42%'>
<textarea style='height:100% width:100%'></textarea>
</td>
</tr>
</table>
But not working, help!
How to make 100% height of textarea inside a td? Please do not suggest rows="--" attribute.
There is a simple and sweet trick. Set textarea position as absolute while top and left are 0, then set td position as relative. That's all.
In this case you are not enforced to set a certain height in px for td or textarea.
body {text-align:center;font-family:Arial;font-weight:400;font-size: 16px;}
table {width:100%;text-align:center;border-collapse: separate;border-spacing: 15px 5px;}
td{
padding:20px;
box-shadow: 0px 0px 20px #e7e7e7;
background-color: #fff;
position: relative
}
textarea{
width:100%;
height:100%;
resize: none;
position: absolute;
top: 0;
left:0;
}
<table>
<tr>
<td rowspan='2' style='height: 78vh;width: 30%; line-height: 28px;'> Layout - 1
</td>
<td rowspan='2' style='width: 40%;'>
Layout - 2
</td>
<td height='42%' style='width: 30%;'>
<textarea></textarea>
</td>
</tr>
<tr>
<td height='42%'>
<textarea></textarea>
</td>
</tr>
</table>
Here's something:
td textarea
{
width: 100%;
height: 100%
}
<table border="1">
<tr>
<td rowspan='2'>
Layout - 1
</td>
<td rowspan='2'>
Layout - 2
</td>
<td style="height:400px">
<textarea></textarea>
</td>
</tr>
<tr>
<td style="height:100px">
<textarea></textarea>
</td>
</tr>
</table>
I made the cells different heights on purpose so you can see that it is in fact stretching out to 100%.
You could do box-sizing: border-box; in CSS to make sure that it counts the entire textarea with its content, padding, and border, as part of its width and height.
Also make sure to change the rows and cols attribute of the actual textarea to make sure that it becomes bigger.
I have a table with several columns. On chrome, the height of the table-cell (td) with an image inside varies when image height is in decimals (e.g. 76.54px) On firefox and IE this works fine and all tds have same height.
Please see the following fiddle:
https://jsfiddle.net/sstzg0rh/3/
Height of the column with image is few point less pixels then the other columns. This works fine on firefox and all tds have same height. Why chrome is showing different behavior with column height and how to fix this
<div class="container-row">
<div class="container">
<table>
<thead>
<tr>
<th>Title</th>
<th>Image</th>
<th>Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>
ABCDEFG
</td>
<td>
<img src="http://via.placeholder.com/74x90" alt="This is a no image">
</td>
<td>
ABCDEFG
</td>
</tr>
<tr>
<td>
ABCDEFG
</td>
<td>
<img src="http://via.placeholder.com/74x90" alt="This is a no image">
</td>
<td>
ABCDEFG
</td>
</tr>
</tbody>
</table>
</div>
body {
line-height: 1.5;
}
img {
max-width: 72px;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
tr {
min-height: 80px;
width: 100%;
border-bottom: 1px solid red;
}
td {
white-space: nowrap;
vertical-align: top;
}
I thought your img elements was a inline elements that led to the problem.
The solution i thought was
img{
display:block;
}
What I want is the image to be the same height of the td when the image isn't there, i.e. 300px, not the height of the image src. I can't specifiy the height of the image, td or table since the parent div represents the height of a responsive container. I've spent far too long on this and tried many things and for some reason the image always insists on being its full height.
<div style='height:300px;width:300px;'>
<table style='height:100%;width:100%;'>
<tr>
<td>
<img style='height:100%;width:100%;' src='https://placehold.it/1920x1200'>
</td>
</tr>
</table>
</div>
Try using CSS instead of inline styles. This helps keep your code more flexible. I've set the height and width to be auto and the max-height and max-width to be at 100% so that the image is contained inside the table cell, but also correctly scaled.
.table-container {
height: 300px;
width: 300px;
padding: 5px;
border: 1px solid red;
}
table td {
border: 1px solid blue;
padding: 0;
}
table td img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class='table-container'>
<table>
<tr>
<td>
<img src='https://placehold.it/1920x1200' />
</td>
</tr>
</table>
</div>
Try This, added "overflow: hidden;position: relative;" to parent and "position: absolute;" to child
<div style='height:300px;width:300px;'>
<table style='height:100%;width:100%; overflow: hidden;position: relative;'>
<tr>
<td style='position: absolute;'>
<img style='height:100%;width:100%;' src='https://placehold.it/1920x1200'>
</td>
</tr>
</table>
</div>
output screen
I have a HTML table and I want the first few columns to be quite long. I am doing this in CSS:
td.longColumn
{
width: 300px;
}
and here is a simplified version of my table
<table>
<tr>
<td class='longColumn'></td>
<td class='longColumn'></td>
<td class='longColumn'></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
[ . . and a bunch more columns . . .]
</tr>
</table>
For some reason the table seems to make this column < 300px when there are a lot of columns. I basically want it to keep that width no matter what (and just increase the horizontal scroll bar).
The container that the table is inside, doesn't have any type of max width so I can't figure out why it's squeezing this column down as opposed to respecting this width.
Is there anyway around this so no matter what, this column will stay a certain width?
Here is the CSS of the outer container div:
#main
{
margin: 22px 0 0 0;
padding: 30px 30px 15px 30px;
border: solid 1px #AAAAAA;
background-color: #fff;
margin-bottom: 30px;
margin-left: 10px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
float: left;
/*width: 1020px;*/
min-width:1020px;
display: block;
overflow: visible;
z-index: 0;
}
You may get more luck with setting widths for your table cells if you apply the rule table-layout: fixed to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.
Giving it both max-width and min-width attributes should work.
I agree with Hristo but there are some cases where table need to be used and solution to your table problem is adding below class to the table and then changing any td width as per your need.
.tables{ border-collapse:collapse; table-layout:fixed;}
I hope this helps for someone who is looking for table solution!
I had the same problem with a bunch of columns where I wanted spacers columns.
I used to do:
<td style='width: 10px;'> </td>
But when the table was wider than window, the spacers were not really 10px, but maybe 5px.
And using only DIVs without a TABLE was not an option in my case.
So I tried:
<td><div style='width: 10px;'></div></td>
And it worked very well ! :)
The best way to set your column widths (td's) is to use a table header (th's). Table headers will set the width on your td's automatically. You just have to make sure that your columns inside your thead are the same number of columns in your tbody.
Check it out here:
http://jsfiddle.net/tKAj8/
HTML
<table>
<thead>
<tr>
<th class="short-column">Short Column</th> <!-- th sets the width -->
<th class="short-column">Short Column</th> <!-- th sets the width -->
<th class="long-column">Long Column</th> <!-- th sets the width -->
</tr>
</thead>
<tbody>
<tr>
<td class="lite-gray">Short Column</td> <!-- td inherits th width -->
<td class="lite-gray">Short Column</td> <!-- td inherits th width -->
<td class="gray">Long Column</td> <!-- td inherits th width -->
</tr>
</tbody>
</table>
CSS
table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; }
.short-column { background: yellow; width: 15%; }
.long-column { background: lime; width: 70%; }
.lite-gray { background: #f2f2f2; }
.gray { background: #cccccc; }
I had issues with not being able to size columns in a table-layout: fixed table that was using a colspan. For the benefit of anyone experiencing a variant of that issue where the suggestion above doesn't work, colgroup worked for me (variation on OP's code):
div {
margin: 22px 0 0 0;
padding: 30px 30px 15px 30px;
border: solid 1px #AAAAAA;
background-color: #fff;
margin-bottom: 30px;
margin-left: 10px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
float: left;
/*width: 1020px;*/
min-width:1020px;
display: block;
overflow: visible;
z-index: 0;
}
td.longColumn {
width: 300px;
}
table {
border: 1px solid;
text-align: center;
width: 100%;
}
td, tr {
border: 1px solid;
}
<div>
<table>
<colgroup>
<col class='longColumn' />
<col class='longColumn' />
<col class='longColumn' />
<col/>
<col/>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td colspan="7">Stuff</td>
</tr>
<tr>
<td>Long Column</td>
<td>Long Column</td>
<td>Long Column</td>
<td>Short</td>
<td>Short</td>
<td>Short</td>
<td>Short</td>
</tr>
</tbody>
</table>
</div>
For those that are having Table Cell/Column width problems and table-layout: fixed did not help.
When applying fixed widths to table cells (<td> or <th>), do not assign a width to all of the cells. There should be at least one cell with an (auto) width. This cell will act as a filler for the remaining space of the table.
e.g.
<table>
<thead>
<tr>
<th style="width: 150">Assigned 150 width to Table Header Cell</th>
<th style="width: 100">Assigned 100 width to Table Header Cell</th>
<th>No width assigned</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 150">Assigned 150 width to Table Body Cell</td>
<td style="width: 100">Assigned 100 width to Table Body Cell</td>
<td>No width assigned</td>
</tr>
</tbody>
</table>
P.S. you can use style classes here, you don't need to use an in-line style.
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
Can't modify <td> width; that is, column width isn't settable. You can add the styling white-space:nowrap; which might help. Or you can add s to add space to columns.
Maybe you could set col width the HTML way: <td width="70%">January>/td>
Unfortunately, in HTML 4.01 and later, that way isn't valid.
How about something like this...
http://jsfiddle.net/qabwb/1/
HTML
<div id="wrapper">
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
</div>
CSS
#wrapper {
min-width: 450px;
height: auto;
border: 1px solid lime;
}
.row {
padding: 4px;
}
.column {
border: 1px solid orange;
border-left: none;
padding: 4px;
display: table-cell;
}
.first {
border-left: 1px solid orange;
}
.longColumn {
min-width: 150px;
}
I've got a table cell that I would always like to be a particular width. However, it doesn't work with large strings of unspaced text. Here's a test case:
td {
border: solid green 1px;
width: 200px;
overflow: hidden;
}
<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>
How do I get the text to be cut off at the edge of the box, rather than having the box expand?
Here is the same problem.
You need to set table-layout:fixed and a suitable width on the table element, as well as overflow:hidden and white-space: nowrap on the table cells.
Examples
Fixed width columns
The width of the table has to be the same (or smaller) than the fixed width cell(s).
With one fixed width column:
* {
box-sizing: border-box;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
max-width: 100px;
}
td {
background: #F00;
padding: 20px;
overflow: hidden;
white-space: nowrap;
width: 100px;
border: solid 1px #000;
}
<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>
With multiple fixed width columns:
* {
box-sizing: border-box;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
max-width: 200px;
}
td {
background: #F00;
padding: 20px;
overflow: hidden;
white-space: nowrap;
width: 100px;
border: solid 1px #000;
}
<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>
Fixed and fluid width columns
A width for the table must be set, but any extra width is simply taken by the fluid cell(s).
With multiple columns, fixed width and fluid width:
* {
box-sizing: border-box;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
td {
background: #F00;
padding: 20px;
border: solid 1px #000;
}
tr td:first-child {
overflow: hidden;
white-space: nowrap;
width: 100px;
}
<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>
That's just the way TD's are. I believe It may be because the TD element's 'display' property is inherently set to 'table-cell' rather than 'block'.
In your case, the alternative may be to wrap the contents of the TD in a DIV and apply width and overflow to the DIV.
<td style="border: solid green 1px; width:200px;">
<div style="width:200px; overflow:hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div>
</td>
There may be some padding or cellpadding issues to deal with, and you're better off removing the inline styles and using external css instead, but this should be a start.
Apply CSS table-layout:fixed; (and sometimes width:<any px or %>) to the TABLE and white-space: nowrap; overflow: hidden; style on TD. Then set CSS widths on the correct cell or column elements.
Significantly, fixed-layout table column widths are determined by the cell widths in the first row of the table. If there are TH elements in the first row, and widths are applied to TD (and not TH), then the width only applies to the contents of the TD (white-space and overflow may be ignored); the table columns will distribute evenly regardless of the set TD width (because there are no widths specified [on TH in the first row]) and the columns will have [calculated] equal widths; the table will not recalculate the column width based on TD width in subsequent rows. Set the width on the first cell elements the table will encounter.
Alternatively, and the safest way to set column widths is to use <COLGROUP> and <COL> tags in the table with the CSS width set on each fixed width COL. Cell width related CSS plays nicer when the table knows the column widths in advance.
I'm not familiar with the specific issue, but you could stick a div, etc inside the td and set overflow on that.
Best solution is to put a div into table cell with zero width.
Tbody table cells will inherit their widths from widths defined the thead.
Position:relative and negative margin should do the trick!
Here is a screenshot:
https://flic.kr/p/nvRs4j
<body>
<!-- SOME CSS -->
<style>
.cropped-table-cells,
.cropped-table-cells tr td {
margin:0px;
padding:0px;
border-collapse:collapse;
}
.cropped-table-cells tr td {
border:1px solid lightgray;
padding:3px 5px 3px 5px;
}
.no-overflow {
display:inline-block;
white-space:nowrap;
position:relative; /* must be relative */
width:100%; /* fit to table cell width */
margin-right:-1000px; /* technically this is a less than zero width object */
overflow:hidden;
}
</style>
<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
<thead>
<tr>
<td style="width:100px;" width="100"><span>ORDER<span></td>
<td style="width:100px;" width="100"><span>NAME<span></td>
<td style="width:200px;" width="200"><span>EMAIL</span></td>
</tr>
</thead>
<tbody>
<tr>
<td><span class="no-overflow">123</span></td>
<td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
<td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
</tbody>
</table>
</body>
Well here is a solution for you but I don't really understand why it works:
<html><body>
<div style="width: 200px; border: 1px solid red;">Test</div>
<div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels. These pretzels are making me thirsty.</div>
<div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div>
<table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
<td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div></td>
</tr></table>
</body></html>
Namely, wrapping the cell contents in a div.
Easiest and simplest solution that works:
table { table-layout: fixed }
table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
You'll have to set the table's style attributes: width and table-layout: fixed; to let the 'overflow: hidden;' attribute work properly.
Imo this works better then using divs with the width style attribute, especially when using it for dynamic resizing calculations, the table will have a simpler DOM which makes manipulation easier because corrections for padding and margin are not required
As an extra, you don't have to set the width for all cells but only for the cells in the first row.
Like this:
<table style="width:0px;table-layout:fixed">
<tr>
<td style="width:60px;">
Id
</td>
<td style="width:100px;">
Name
</td>
<td style="width:160px;overflow:hidden">
VeryLongTextWhichShouldBeKindOfTruncated
</td>
</tr>
<tr>
<td style="">
Id
</td>
<td style="">
Name
</td>
<td style="overflow:hidden">
VeryLongTextWhichShouldBeKindOfTruncated
</td>
</tr>
</table>
I've just had a similar problem, and had to use the <div> inside the <td> at first (John MacIntyre's solution didn't work for me for various reasons).
Note though that <td><div>...</div></td> isn't valid placement for a div so instead I'm using a <span> with display:block; set. It validates fine now and works.
<style>
.col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
</style>
<table>
<tr>
<td class="col">123456789123456789</td>
</tr>
</table>
displays 123456
to make more simple
i propose to put an textarea inside the td
wich is manage automaticly the overflow
<td><textarea autofocus>$post_title</textarea></td>
need to be ameliorate