I am looking for a way to specify a table's width by specifying widths of its TDs.
In the following scenario (try it live on jsfiddle) you can see that I have specified width of each TD as 100px and I expected to get a 300px table (and a horizontal scrollbar for div) but in practice browsers give them a width of 63px (that's table's width divided by 3)
Is there any way to make TDs determine the width of table and not other way round? So far I have tried different values of table-layout, display, overflow for TD and TABLE without any success.
The html:
<div>
200px
<table>
<tr>
<td>100px</td>
<td>100px</td>
<td>100px</td>
</tr>
</table>
</div>
and a minimal CSS:
div {
width: 200px;
height: 300px;
border: solid 1px red;
overflow-x: scroll;
}
td {
width:100px;
border: solid 1px #000;
}
table {
border-collapse: collapse;
}
A simple solution is make the td's content be 100px wide.
<div>
200px
<table>
<tr>
<td><div class="content">100px</div></td>
<td><div class="content">100px</div></td>
<td><div class="content">100px</div></td>
</tr>
</table>
</div>
.content {
width: 100px;
}
Simplest solution appears to be setting min-width instead of width for TDs.
If you're dynamically generating the table, you could just dynamically set the width of the table while you're at it. Just calculate the desired width, and add style="width:300px;" (or whatever) to the <table> tag.
Not that the other options people have posted here aren't also perfectly valid, of course.
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 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.
I want to create a table that is fully contained within its parent element, but having column widths that are resolved based on their content. If the required length of the table is longer than the content box of the parent element, then a horizontal scrollbar shall appear underneath the table. I tried fiddling with the table-layout and overflow properties, but without success.
HTML code:
<div>
<table>
<tr>
<td>fixed_length_text</td>
<td>variable_length_text</td>
<td>image</td>
<td>double_float_double_float</td>
</tr>
<tr>
<td>fixed_length_text</td>
<td>variable_length_text_variable_length_text</td>
<td>image</td>
<td>double_float_double_float</td>
</tr>
</table>
</div>
CSS code:
div {
padding: 10px;
background: grey;
width: 400px;
}
table {
border-collapse: separate;
border-spacing: 2px;
background: white;
}
tr {
background: green;
}
This is what I have tried on jsFiddle. Is there anyway to combine the best of both worlds?
Try overflow-x:auto;. This applies to just the horizontal axis of the element.
if i understand you right than:
http://jsfiddle.net/nfg34/1/
I have a table and I want to define the min-width and max-height properties. See example below.
My problem now is that the browser doesn't take it. If I define it on td it gets ignored, if I define it in an div element inside a td element, the content has the right min and max width, but the table still has the same size. (so there is a lot of free space :/)
How can I resolve this?
EDIT:
I just noticed that the problem seems to only occur when the table is in fullscreen mode. Nevertheless, an element shouldn't have more than the max-width than!
Example:
<html>
<head>
<style type="text/css">
td {
border: 1px solid black;
}
html,body,.fullheight {
height: 100%;
width: 100%;
}
.minfield {
max-width: 10px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<table class="fullheight">
<tr>
<td class="minfield">
<div class="minfield">
<p>hallo</p>
</div>
</td>
<td><p>welt</p></td>
</tr>
</table>
</body>
</html>
For table cells the 'width' property should be used, as the 'min-width' and 'max-width' is undefined for table cells. See the specification:
"In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined."
To enforce the width, you may try to change the table-layout property to "fixed". The specification describes the algorithm pretty clearly.
To force min-height attribute for td you also can put invisible image in td, or wrap you td into div.
Example for first case:
<td><img style="float:left;min-height:50px;visibility:hidden;width:0px;">12345</td>