I have the following table:
<table>
<tbody>
<tr>
<td colspan="2">
<img src="http://www.sherv.net/cm/emoticons/cats/cat-headphones-smiley-emoticon.gif" />
<img src="http://www.beaukit.com/catgrpbl.jpg" />
</td>
</tr>
</tbody>
</table>
and the following CSS:
table {
width: 40%;
background-color:grey;
text-align: center;
margin-bottom: 20px;
}
img {
max-width: 100%;
margin: 0 0 0.8em 0;
max-height: 800px !important;
width: auto !important;
height: auto;
}
See Jsfiddle
What I want is that the pictures in the cell fill its width if they are bigger than the cell itself. In case the pictures are smaller, they should keep maintain their native width expressed via max-width. This seems to work well in Chrome, but when I try it in firefox the bigger pictures stretch the width of the cell.
While, if I change the width of the images to: width: 100% !important;, the smaller picture are streched to fill the cell (see table.two).
How can I solve the issue?
try adding
table {
table-layout:fixed;
}
Table cells don't behave like block elements, their widths and heights are defined by the content inside them. From the I.E. documentation:
auto: Default. Column width is set by the widest unbreakable content in the column cells.
fixed: Table and column widths are set either by the sum of the widths on the col objects or, if these are not specified, by the width of the first row of cells. If no width is specified for the table, it renders by default with width=100%.
You have use width auti !important which you should not be to
table tr, table tr td{
width:100%
}
table tr td a{
width:100%;
display:block;
}
img {
width: 100%;
}
Check on Fiddle
Related
I thought that part of the appeal of table-layout:fixed was that you could set your cell widths to be whatever you want and the browser would blindly accept them.
I have a situation where I have a containing div set to 900px width.
In it is a table, with 4 columns, each set to 300px width.
The div has a background colour and is set to overflow:visible.
The result should be that the third column's right hand edge lines up with the right hand edge of the div, and the fourth column bursts out of the div.
But instead all four columns show inside the div, at about 225px each.
What can I do to alleviate this problem?
Thanks!
This is expected because, for your example, you need to specify a width of the table for the overlow to be effective.
Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content might not fit in the column widths provided. Cells use the overflow property to determine whether to clip any overflowing content, but only if the table has a known width; otherwise, they won't overflow the cells.
MDN
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
div {
width: 300px;
margin: 1em auto;
border: 1px solid red;
text-align: center;
}
table {
table-layout: fixed;
width: 300px;
border-collapse: collapse;
}
td {
width: 100px;
border: 1px solid green;
}
<div>
<table>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
</table>
</div>
An in-flow block-level table (display: table) with fixed layout and auto width is subject to the constraints specified in section 10.3.3 of the spec (although the spec actually allows browsers to skip fixed layout altogether for tables with auto width). That is, the same constraints that apply to in-flow block boxes with auto width — the table will only be as wide as its containing block and any borders, padding and margins allow.
The workaround is trivial: specify any arbitrary table width that is known to never exceed the total column width — if the total column width will always exceed the container width, specifying 100% width works too:
div {
width: 900px;
background-color: #ff0;
}
table {
width: 100%;
table-layout: fixed;
}
td {
width: 300px;
}
<div>
<table>
<tr>
<td>1 <td>2 <td>3 <td>4
</table>
</div>
I have a table row with two cells inside, the height is different because the data inside changes, so I cannot set an explicit height.
The two cells contain div's and are likely to be different heights due to the content inside, my question is is it possible to have a cell take up 100% height so they both cells match?
It's a bit vague in text form, so here's an example.
The second cell and div should match the height of the first.
Unfortunately I've tried setting the height to 100% without success.
td, div {
height:100%;
}
In order to use the 'height:100%' tag, all parents also are required to have a height value set.
For example, see here:
td {
width:100px;
vertical-align:top;
}
table, tr, td{
height: 100%;
}
td div {
background-color:grey;
height: 100%;
}
can't you put background color in the TD??
But if you want div to expand, you can do this
div {
background-color: grey;
display: inline-block;
height: 100%;
}
This question has been asked several times, but none of the answers provided seem to help me:
See this in action here: http://jsfiddle.net/BlaM/bsQNj/2/
I have a "dynamic" (percentage based) layout with two columns.
.grid {
width: 100%;
box-sizing: border-box;
}
.grid > * {
box-sizing: border-box;
margin: 0;
}
.grid .col50 {
padding: 0 1.5%;
float: left;
width: 50%;
}
In each of these columns I have a table that is supposed to use the full column width.
.data-table {
width: 100%;
}
.data-table td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
My problem is that some of the columns in that table have content that needs to be truncated to fit in the given width of the table. That does not happen, though. I get two tables that are overlaying each other.
Requirements:
Needs to be percentage based. I can't set absolute sizes.
Each rows' height must not grow beyond one text line (which would happen if I remove white-space: nowrap)
Must work in Chrome, Firefox and Internet Explorer 8+
Can't display tables below each other as it has to fit onto one sheet of paper when printing.
What I tried:
inside of and use width and overflow on that. Changed nothing.
"display: table;" on containing div - instead of having two columns the tables were displayed below each other
"table-layout: fixed;" - Forced all columns to have same width
I know that columns 2+3 have a total of 30% of width so I tried to manually set column 1 to 70% - Did not change anything
Zero-width spaces in content - didn't change anything, probably due to white-space: nowrap;
Related Questions:
Table width exceeds container's width
How do I prevent my HTML table from stretching
HTML CSS How to stop a table cell from expanding
Table Overflowing Outside of Div
you need to add the table-layout property:
table-layout: fixed;
also include width=100% in the table HTML tag, not just the style tag.
http://jsfiddle.net/reeK5/
Maybe you'll be interested in a max-width: 0; hack I've discovered.
It has some limits, we should use CSS tables instead of HTML, but it works:
.leftBlock
{
width: 100%;
max-width: 0;
word-wrap: break-word;
overflow: hidden;
}
.rightBlock
{
width: 200px;
max-width: 200px;
min-width: 200px;
}
http://jsfiddle.net/CyberAP/NUHTk/103/
.div {
width:300px;
border:1px solid;
}
.breaked {
word-break: break-all;
}
table{
border:1px solid red;
}
td {
border:1px solid green;
}
<div class="div">
<table>
<tr>
<td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
<td>13</td>
</tr>
<tr>
<td>ddddddddddddd</td>
<td>aa</td>
</tr>
</table>
<br /><hr/><br />
<table class="breaked">
<tr>
<td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
<td>13</td>
</tr>
<tr>
<td>ddddddddddddd</td>
<td>aa</td>
</tr>
</table>
</div>
Measurements on tables work differently. In general, width on a table cell is handled as min-width.
One solution, if you don't mind adding extra markup, is to put a div inside each table cell in which you put the content. Then give this div a width, or a max-width. So
<td>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</td>
becomes
<td><div>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</div></td>
and so on.
See updated fiddle: http://jsfiddle.net/bsQNj/4/
Edit: I see the fiddle needs some work - I forgot to put some divs in where they were necessary. But I hope you can work with this idea.
In your CSS:
table {
table-layout: auto;
width: 100%;
}
That should cover all tables
I need a header that is width:100% and has 3 columns with background images in the 1st and 3rd column:
This solution needs to be cross-browser compatible.
First column is a background image and is 50% width (not including width of caption)
Second column is the caption. This has no background (transparent). It's width should not be any greater than it's contents.
Third column is same as first column.
Using a table this takes 2 seconds: http://jsfiddle.net/aLeyS/
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td>Caption</td>
<td></td>
</tr>
table {
width: 100%;
}
table td:first-child, table td:last-child {
width: 50%;
background-image: url(http://fc01.deviantart.net/fs16/i/2007/132/9/4/BW_Striped_Background_Texture_by_Enchantedgal_Stock.jpg);
}
table td:nth-child(2) {
padding: 0 10px;
font-size: 30px;
}
Without a table this seems to be much trickier.
I've tried using set percentage widths on DIVs inside the parent div, but it always ends up giving the center column more width than it needs, or forcing the caption to wrap if it's not enough percentage.
Again, the center column (caption) should not have any width greater than its content, and it's background needs to be transparent (not white).
You can fix this by setting display:table-cell on the divs. I've updated your jsFiddle.
HTML
<div class='bg'></div>
<div class='caption'>Caption</div>
<div class='bg'></div>
CSS
div {
display: table-cell;
}
div.bg {
width: 50%;
background-image: url(http://fc01.deviantart.net/fs16/i/2007/132/9/4/BW_Striped_Background_Texture_by_Enchantedgal_Stock.jpg);
}
div.caption {
padding: 0 10px;
font-size: 30px;
text-transform: uppercase;
}
Is there a way using HTML/CSS (with relative sizing) to make a row of cells stretch the entire width of the table within which it is contained?
The cells should be equal widths and the outer table size is also dynamic with <table width="100%">.
Currently if I don't specify a fixed size; the cells just autosize to fit their contents.
You don't even have to set a specific width for the cells, table-layout: fixed suffices to spread the cells evenly.
ul {
width: 100%;
display: table;
table-layout: fixed;
border-collapse: collapse;
}
li {
display: table-cell;
text-align: center;
border: 1px solid hotpink;
vertical-align: middle;
word-wrap: break-word;
}
<ul>
<li>foo<br>foo</li>
<li>barbarbarbarbar</li>
<li>baz</li>
</ul>
Note that for table-layout to work the table styled element must have a width set (100% in my example).
Just use percentage widths and fixed table layout:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
with
table { table-layout: fixed; }
td { width: 33%; }
Fixed table layout is important as otherwise the browser will adjust the widths as it sees fit if the contents don't fit ie the widths are otherwise a suggestion not a rule without fixed table layout.
Obviously, adjust the CSS to fit your circumstances, which usually means applying the styling only to a tables with a given class or possibly with a given ID.
Using table-layout: fixed as a property for table and width: calc(100%/3); for td (assuming there are 3 td's). With these two properties set, the table cells will be equal in size.
Refer to the demo.
Just put this lines to your table style:
#table_name{
table-layout: fixed;
width: 100%;
}
You have a good example on this codepan.
This is late answer, but it will help for future searches.