I have a table which I don't want to have a width of less than 540 pixels, in this table I want a single column to fill the remaining width if the content is less than 540 pixels wide.
If I set this column to have width of 99% it works in Firefox, Safari and Chrome, but not in Internet Explorer (any version), where the table grows to the full page width.
I need this to work in IE7 and above.
edit:
added some code:
<div class="container">
<table class="my-table">
<tr>
<td class="first"><img src="my-img.png"></td>
<td class="expand">Some text here... should grow</td>
<td class="meta">short text</td>
<td class="end-col">final column</td>
</tr>
</table>
</div>
CSS:
.container {
min-width: 540px;
display: inline-block;
}
.expand {
width: 99%;
}
.first, .meta and .end-col should all shrink wrap to their respective contents.
This works in everything but Internet Explorer.
Related
When I increase the table height, all the rows get resized and the additional height is distributed equally. among them.
Question
Is it possible to make a row (in my example the one with headers) always stay at it's minimum height? As an analogy I see it as specifying flex-grow: 0 on a Flex item.
No fixed height
I don't want to make that row fixed height (e.g. set on it height: <fixed value in px>), just make it's height the natural minimum to render all the contents.
Code
FIDDLE with the example code to work on. Screenshot below.
I want to make the first row in the right table (.Table-Row--NotResizable) to be the same height as the first row in the left table.
HTML
<div class="TableDisplay">
<table class="Table Table--Natural">
<tr>
<th>Artist</th>
<th>Song</th>
</tr>
<tr>
<td>Prince</td>
<td>Kiss</td>
</tr>
<tr>
<td>Bob Dylan</td>
<td>Idiot Wind</td>
</tr>
</table>
<table class="Table Table--Full">
<tr class="Table-Row--NotResizable">
<th>Artist</th>
<th>Song</th>
</tr>
<tr>
<td>Prince</td>
<td>Kiss</td>
</tr>
<tr>
<td>Bob Dylan</td>
<td>Idiot Wind</td>
</tr>
</table>
</div>
CSS
html,
body {
height: 100%;
min-height: 100%;
}
.TableDisplay {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 100%;
}
.Table {
height: 100%;
border-collapse: collapse;
}
.Table td,
.Table th {
border: 1px solid black;
}
.Table--Full {
height: 100%;
}
.Table--Natural {
height: auto;
}
/* Make this row do not participate in height changes */
.Table-Row--NotResizable {
/* ??? */
}
In fact fixed value in px is exactly what you should use:
.Table-Row--NotResizable {
height: 1px;
}
If you set it to 1px then the browser will resize it to exactly the size needed to fit the content. Table content has to fit into table cell, so the height will not be smaller, and as any (non-empty) content will be higher than 1px it will also not be greater than minimum needed.
I've been scratching my head at this for ages but I finally found a solution that works for me which slightly differs from the current answer.
In order to prevent each <Tr> from resizing to match the <Table> height, I set the height of each of my <Tr> to 1px, however, to stop these rows from resizing, I had to add an empty final <Tr> that does not contain any data to the end of my <Table>. It seems this behaviour is because the <Table> element by default needs the <Tr> elements to sum up to the total height of the table, and the empty <Tr> element stretches to fill this height whilst the rows containing data can be sized to their content.
I've got a table with the contents of the cells completely filling them. I gave the content a fixed width and a height of 100% so that elements that get bigger are still able to grow the cells. The cells also have a minimum height via the simple height attribute so the 100% height of the content has an effect. In Chrome and Edge everything works fine, but in Firefox the cells don't grow:
Chrome:
Firefox:
If you want to try yourself:
table {
border-spacing: 8px;
font-size: 14px;
}
td {
height: 50px;
}
td div {
height: 100%;
width: 200px;
background-color: green;
}
<table>
<tr>
<td>
<div>
This div is normal sized.
</div>
</td>
<td>
<div>
This div is normal sized.
</div>
</td>
</tr>
<tr>
<td>
<div>
This div is also normal sized but should size accordingly.
</div>
</td>
<td>
<div>
This div is very very big so it gets higher and should affect other divs in the same row. But not in Firefox apparently.
</div>
</td>
</tr>
</table>
Not sure if this a bug in Firefox or a feature in Chrome, but the way I understood table sizing is that table elements cannot have a fixed size. Instead their width and height attributes are used as a min-width / min-height and they grow according to their content. Is there a quick workaround or should I rebuild the table in flexbox layout?
Update
By the way, when I instead set a fixed height on the row / tr and height: 100%; on the td, it works in Firefox. But then it's broken in Chrome...
I managed to find a workaround. I added the lines
#-moz-document url-prefix() {
tr {
height: 50px; // Your min height
}
td {
height: auto;
}
}
to my css and now it seems to display correctly in firefox and chrome. Not very clean but it works.
Apparently Chrome was to adopt Firefox behaviour with tables in Version 50 but reverted because it broke too many layouts. The trick applying height: 100%; to the tds worked because all percent sizes are automatically translated to auto. Makes much more sense then.
I have a table with 1 row and 2 columns. The left cell contains an image, the height of which is given in em (em is defined as 2vh, so everything will adjust according to the viewport height). The right cell contains some text.
<html>
<head>
<style>
body{
font-size:2vh;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="some.jpg" style="height: 18em">
</td>
<td>
Some text, more text, even more text.
</td>
</tr>
</table>
</body>
</html>
Now in Firefox and Internet Explorer the image shows with the proper ratio of width and height, and the text in the right cell is wrapped to the remaining width. But in Chrome and Opera it seems that the right cell adjusts its width to the text and the width of the image in the left cell is reduced to fit into the remaining space. So the question is: How can I force the left cell to adjust its width to the calculated width of the image? (The height/width ratio of the image is not always the same.)
The suggested answer addresses a different problem. It is about adjusting an image to the table cell. My problem is about adjusting the cell to the image.
Try this working fiddle, hope it will work
jsfiddle
CSS:
html. body, table {
margin: 0px;
padding: 0px;
}
table {
display: table;
width: 100%;
table-layout: fixed;
}
table tr {
display: table-row;
width: 100%;
}
table tr td {
display: table-cell;
width: 25%;
}
.imageTable {
float: left;
width: 100%;
}
.autoResizeImage {
max-width: 100%;
}
<div class="imageTable">
<table>
<tbody>
<tr>
<td>
<img class="autoResizeImage" src="http://www.hhacademy.org/computer-lcd-monitor-vector.jpg" />
</td>
<td>
<img class="autoResizeImage" src="http://gatelyacademy.org/wp-content/uploads/2014/10/computer-156513_640.png" />
</td>
<td>
<img class="autoResizeImage" src="http://i.dailymail.co.uk/i/pix/2013/01/07/article-2258276-16C8FB51000005DC-20_638x476.jpg" />
</td>
<td>
<img class="autoResizeImage" src="http://www.computer-repair-service.co.uk/wp-content/uploads/2013/08/mac-computer.png" />
</td>
</tr>
</tbody>
</table>
</div>
I solved this: The quirk is somewhere else. I had this somewhere in my CSS:
img{
max-width:100%
}
This is what caused the strange behavior in Opera and Chrome. If you're interested, check out this jsfiddle and compare the behavior in Opera and Chrome vs. Firefox and Internet Explorer: http://jsfiddle.net/martinvie/3moocskt/6/
I am trying to build a table that contains a td which has a width set in percentage and when overflown a horizontal scrollbar.
Unfortunately I don't manage to make this happen.
http://jsfiddle.net/ne45s2wf/1/
HTML
<div class="container">
<table>
<tbody>
<tr>
<td>cell 1
</td>
<td>cell 2
</td>
<td class="too-long">cell 3 loooooooooooooooooooooooooooooooooooooooooooong
</td>
</tr>
</tbody>
</table>
</div>
CSS
.container {
position: relative;
max-width: 500px;
background-color: red;
}
table {
width: 100%;
}
td.too-long {
background-color: darkgreen;
display: inline-block;
width: 20%;
overflow-x: scroll;
}
First thing I wonder is what is the td-width in percentage relative to? And is it possible to set it to be relative to the table?
I would set a maximum width in percentage for the td with overflow hidden. While this works for the td, the parent containers do not align their width to the td child when its width is set with percentage. The parents width is as if the child did not have any width set. Furthermore the table now is not "responsive" any more.
I would take a look at bootstrap. I am not sure exactly what you mean but it seems like you are having trouble with your tables overflowing. Bootstrap has responsive tables which will scroll in the way you specify at small sizes. Take a look at this:
http://getbootstrap.com/css/#tables-responsive
I have an html table with some rows, this table is inside an HTML div, I need this div to always have a scroll.
In order to do this, I am setting this two properties in the css of the div: height: 400px and overflow-y: scroll, yet, as you may know, the scroll only appears when the table exceeds the size of 400px.
Is there anyway to make the div always have a size slightly smaller than the table (for example, for the div to be 90% of the size of the table), or any other way to make the div always have the scroll?
#events_div{
height:400px;
overflow-y:scroll
}
<div id="events_div">
<table id="events_table">
<thead>
<th>...</th>
</thead>
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
</table>
</div>
set the min-height values of each and that should accomplish what you want.
Using jQuery of JavaScript, you can get the height of the table and set the div to be slightly smaller than the width you retrieved from the table. Be sure run this code only when the page has fully loaded (see code for jQuery):
$(document).ready(function() {
// put your code here
});
Another solution would be to set the height of the table to 105% (some value above 100). This only works if the parent div that surrounds the table has a predefined height.
All you need to do is set the max-height of your div to something smaller than the projected height of the table. So if the table is going to be about 300px tall set your div's max-height: 200px;
.theDiv {
max-height: 200px;
overflow-y: scroll;
background: blue;
}
.theTable {
height: 300px;
background: black;
color: white;
}
<div class="theDiv">
<table class="theTable">
<tr>
<th>Hello</th>
</tr>
<tr>
<td>Hello person</td>
</tr>
</table>
</div>
Also if you don't know the height of your table, set the min-height to something larger than the height of your div.