I am using a table-layout: fixed table to set percentage widths of columns, but for some reason the columns don't span the width of the table for certain screen sizes - 1300px and up to be exact. The percentages (not exact here) add up to 100% and the columns fit the table under 1300px. Anyone know how to make it work for all screen sizes?
Shrinking the column width for the largest column makes it wider at the large screen sizes, no idea why. And if I do that the percentages don't add up to 100%, and doesnt seem to fit any rhyme or reason that I could generate the percentages mathematically.
here is the general html/css
<style>
table {
display: block;
height: 272px;
overflow-y: auto;
table-layout: fixed;
width: 100%
}
.th1 {
width: 29.41%;
}
.th2 {
width: 17.64%;
}
</style>
<table>
<thead>
<tr>
<th class='th1'>header1</th>
<th class='th2'>header2</th>
<th class='th2'>header3</th>
<th class='th2'>header4</th>
<th class='th2'>header5</th>
</tr>
</thead>
<tbody>
...stuff
</tbody>
</table>
It was because the element was being set to display: block. I was doing this to make the table have a static height and scroll. I fixed it by just putting it inside a div that has the height and scroll behavior.
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'd like to set width on the td in tbody which is underneath thead th that has a colspan="2" with an hard defined column width in %. The browser shell not dynamically adjust table width if the cell content exceeds with.
.sample {
width: 100%;
table-layout: fixed;
}
.sample td:nth-child(1),
.sample th:nth-child(1) {
width: 30%;
}
.sample td:nth-child(2),
.sample th:nth-child(2) {
width: 70%;
}
<table class="sample" border="1">
<thead>
<tr>
<th colspan="2">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>30% This columns has a lot of content and a really long woooooooooooooooooooooooooooooooooooooord which is not wrapable by the browser by default. This column still should be 30%with.</td>
<td>70%</td>
</tr>
</tbody>
</table>
The above style works if thead is removed but does not work with it.
Important notes,
I added the table-layout: fixed; since I need the columns to be exactly as width as specified. Using table-layoud: auto; results in the browser taking the specified width as on orientation but still dynamically adjusting width if table content exceeds the available width.
colgroup and col can not be used since I'm using a wysiwyg editor which is not adding colgroups. Thus I rely on css.
This is a follow up question, since new conditions came up during my initial question Set width on <td> which under <th> with colspan
Here's code:
<div class="row">
<div class="large-12 columns">
<table class="scroll wide">
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Forth</td>
</tr>
</table>
</div>
</div>
CSS
.wide { width: 100%; }
Here's fiddle:
https://jsfiddle.net/emilcieslar/zc37ydys/
As you can see, there are 4 columns and scroll class that makes the table scrollable whenever the width of the page is smaller than the table width. However if I want to make the table width 100%, it stays the same, it doesn't stretch. I can see that the table tag itself is stretched, but the insides doesn't stretch. This is caused by table being display: block, however it has to be display: block, otherwise it won't be scrollable (on horizontal axis). How can I achieve 100% width table while still being responsive?
As they say, think out of the box, so I thought out of the table box and wrapped the table inside a container:
<div class="horizontal-scroll">
<table class="my-table"><!-- without scroll class now -->
...
</table>
</div><!-- /horizontal-scroll -->
with CSS:
.horizontal-scroll {
overflow: hidden;
overflow-x: auto;
clear: both;
width: 100%;
}
.my-table {
min-width: rem-calc(640);
}
Incredibly simple solution, but took me a while to realise it. It's important to set min-width for the table as table width is by default flexible therefore it will never scroll if you don't set min-width. It will result in a shrank table to the point it's not possible to shrink anymore.
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.