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
Related
I'm trying to align three images in a class div into a straight horizontal line.
<div class="topimages">
<img src="code/images/image_personallogo.png" alt="personallogo">
<img src="code/images/image_propercorn.png" alt="propercorn">
<img src="code/images/image_christmas.png" alt="christmascard">
</div><!--top images-->
and the CSS so far
.topimages {
display: table;
width: 1024px;
margin: 40px auto;
}
.topimages img {
width:319px;
height:319px;
}
So the problem is that the images are almost perfectly aligned except that there is different space between the second and third image than between the first and second image. This is what I am talking about : http://postimg.org/image/y00x4nvtr/
Anyone knows what cause this and how I can fix it?
Thanks.
The nicest way is to use a table with one tr:
HTML:
<table id="myImages">
<tr>
<td>
<img src="code/images/image_christmas.png" alt="christmascard" />
</td>
<td>
<img src="code/images/image_propercorn.png" alt="propercorn" />
</td>
<td>
<img src="code/images/image_christmas.png" alt="christmascard" />
</td>
</tr>
</table>
To change margin in a table, you must use border-collapse and border-spacing
CSS:
#myImages {
border: 1px solid silver;
padding: 50px;
margin: 0px auto;
border-collapse: separate;
border-spacing: 20px;
}
#myImages img {
width: 320px;
height: 320px;
}
In a table or (display: table) there is no need to set a whole width to use margin: 0 auto to center the element. The width comes from the width of the elements within. And from paddings and margins.
https://jsfiddle.net/ka827L97/
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 am trying to have a div with a horizontal scrollbar inside a table that has 100% width:
<div id="div1" style="border: thin solid red; width: 800px; height: 150px;">
<table id="table1" style="border: thin solid yellow; width: 100%; display: block;">
<tr>
<td>
<div id="div2" style="border: thin solid black; width: 100%; height: 150px; overflow: auto;">
<div id="div3" style="border: thin solid blue; width: 1000px;">Hello</div>
</div>
</td>
</tr>
</table>
</div>
I don't know why, but all browsers display #div2 1000px wide instead of 800px. Why is that?
How can I achieve displaying it only 800px wide and have a scrollbar inside #div2?
I don't want to specify the exact width for the <td> tag.
Wrapping div2 inside a single cell table with style="table-layout: fixed; width: 100%" appears to be a solution. See http://jsfiddle.net/gvqVN/1/.
As I remember, the div-s and table-s don't like each other :) Try to give the 800px width to the div2. Also use overflow:scroll to have the scrollbars Here is the JSFiddle
And the code:
<div id="div1" style="border: thin solid red; width: 800px; height: 150px;">
<table id="table1" style="border: thin solid yellow; width: 100%; display: block;">
<tr>
<td>
<div id="div2" style="border: thin solid black; width: 800px; height: 150px; overflow: scroll;">
<div id="div3" style="border: thin solid blue; width: 1000px;">Hello</div>
</div>
</td>
</tr>
</table>
</div>
To div id div1 add overflow: hidden
Your first line should looks like this:
<div id="div1" style="border: thin solid red; width: 800px; height: 150px; overflow: hidden;">
Because #div2's child element (#div3) has the width of 1000px.
You'll have to change the 100% width on div2 with 800px, otherwise it'll just take the width of its child div3.
EDIT: If you can't use fixed width, you could set all table elements to display:block - standard tables have a very awkward way of handling dimensions, which is why your example didn't work.
Downside of this solution is, of course, that your table won't react like a table anymore...
http://jsfiddle.net/WKG5F/
How do I make an element take up a percentage width of a table cell? When I attempt to do a percentage, say 70%, it grows much larger than the containing cell. 70% should be smaller than the containing cell! Here's a barebones example of my page. The absolute positioning is necessary for some layering I want to do.
HTML
<table>
<tr>
<td>
<div>hello</div>
</td>
<td>
<div>world</div>
</td>
</tr>
</table>
CSS
td {
position: relative;
width: 10em;
}
div {
position: absolute;
width: 70%;
}
Matt Ball's comment got me on the right track. It's some extra markup.
HTML
<table>
<tr>
<td>
<div class="container">
<div class="bar">hello</div>
</div>
</td>
<td>
<div class="container">
<div class="bar">world</div>
</div>
</td>
</tr>
</table>
CSS
td {
width: 10em;
}
.container {
position: relative;
}
.bar {
position: absolute;
width: 70%;
}
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