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.
Related
I have two tables in the following fiddle. The rows are not aligned to the header. This is my code for first table
<table class=" table-bordered">
<tr>
<th>Doc Name:</th>
<th>Atom Type:</th>
<th>Cluster Method:</th>
<th>k:</th>
<th>
<small>Stylistic Feature(s):</small>
</th>
</tr>
<tr>
<td style="font-size: 10px;">rowling_and_dickens</td>
<td style="font-size: 10px;">sentence</td>
<td style="font-size: 10px;">kmeans</td>
<td style="font-size: 10px;">2</td>
<td style="font-size: 10px;">hapax_dislegomena;honore_r_measure;hapax_legomena;</td>
</tr>
</table>
The other table follows a similar pattern. I am not adding them here due to paucity of space.
https://jsfiddle.net/fk6fnto4/
My table rows do not get aligned properly no matter what I do. I have looked at many solutions and modified the code accordingly, to no avail. Please help me identify what is wrong here.
To make column content aligned, we need to set its width to be fixed. Currently each cell takes as much space as it needs. It seems that the first column should have the smallest width, and the third one should be widest. Other columns could be same width since they all contain 5 digit numbers. To set different td widths we could use different classes for each, but it could be messy, so we'll use nth-child() selector which looks like this:
td:nth-child(1) {
width: 10%
}
This sets width of all td elements that are the first child of their parents to 10%. What you should do is add this to your style so it looks like this:
<style>
.container {
margin-left: 0;
}
tbody {
display: block;
max-height: 500px;
overflow-y: scroll;
}
thead,
tbody tr {
display: table;
width: 100%;
}
thead {
width: 100%;
}
table {
width: 200px;
}
td:nth-child(1) {
width:10%
}
td:nth-child(3) {
width:30%
}
</style>
What this means is that the first column will take up 10% of tbody width, the third one will take up 30%, and others will use 20% each. However, if those can also contain data of variable length, you should add similar rules for them too.
This way, column content will be aligned to center. To set different alignment use text-align property.
I have a table with a fixed number of columns. I would like 3 of the columns to have the same width, but I don't know what it is, as I don't know the width of the other 2. I want the browser to render it as best it can with the one constraint that my three designated columns all have the same width,
Here's an example. I would like columns 2,3,4 all to have the same width, I don't mind what it is, just that they are the same.
<table>
<tr>
<td>Could be short or maybe it could be long</td>
<td class="samewidth">Col2 Long Text</td>
<td class="samewidth">Col3 Some More Long Text</td>
<td class="samewidth">Col4 Some More Long Text and a bit more on top</td>
<td>Could be short or long</td>
<tr>
</table>
I can only do something like I want by having a fixed percentage
td.samewidth {
width: 25%;
overflow: hidden;
}
Here's a fiddle with the best I could do which ties the three columns to have a width of 25%.
https://jsfiddle.net/GrimRob/zugnyzb4/
What I ideally want to do is get rid of width: 25% and put something in its place, but what?
Do it like this:
td.samewidth {
width: 33%;
overflow: hidden;
}
<table>
<tr>
<td>Could be short or maybe it could be long</td>
<td>
<table>
<tr>
<td class="samewidth">Col2 Long Text</td>
<td class="samewidth">Col3 Some More Long Text</td>
<td class="samewidth">Col4 Some More Long Text and a bit more on top</td>
</tr>
</table>
</td>
<td>Could be short or long</td>
</tr>
</table>
Since your "samewidh" columns will be 33% fixed, you won't have trouble with other rows misaligning. At most you'll have to add !important.
Hard to arrive at a set answer for your question, since I am not exactly sure how you want the columns to resize based on content. Flexbox could be an alternative for you. Here is the CSS and a Codepen illustrating, to as best I understood, what you are trying to accomplish.
table {
width: 100%;
border: 1px solid black;
}
tr {
display: flex;
}
td {
border: 1px solid black;
}
td.samewidth {
/* width: 25%; */
overflow: hidden;
flex-grow: 1;
display: inline-block;
flex-basis: 0;
}
td:not(.samewidth) {
flex-basis: content;
}
http://codepen.io/anon/pen/bpobGq
In this example, columns 1 and 5 (not samewidth) determine width based off of the content provided. Columns with the .samewidth class, will grow evenly to fill up the remaining space available in the parent container (in this case the tr).
You really have a lot of options here with how you'd want the columns to resize. You could set a fixed width for columns 1 and 5, size off of content (as in example), or have those grow to fill up space as well. Hopefully this gets you on the right path.
Here's a quick guide on Flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I feel like I'm missing something. I have a <table> set to width: 100%; and I add CSS to prevent a column from becoming narrower than 50px. It is a simple scenario.
My problem is that the column which has min-width applied gets wider even when if it is already wider than the min-width value.
Example of problem: I apply min-width: 50px; to a td element which has a width of 123px, the td increases to a width of 167px. I expected applying min-width: 50px; to an element with a rendered width of 123px to not change the elements width.
My problem can be reproduced by running the below code and following these steps:
Check the width of the first column of the table
Verify that the column has a width greater than 50px
If the first column has a width less than 50px, increase the width of your browser window.
When the first column has a display width greater than 50px, click the button below the table.
The width of the first column should increase, despite not being smaller than the min-width value.
NOTE: Clicking the button will toggle a class applied to the table cells (th and td elements) which form the first column of the table. The class applies min-width: 50px;.
This problem will be considered solved by any solution that does not affect the calculated width of a table cell (th or td) with a calculated width greater than 50px and style property width: auto; when setting min-width: 50px.
I am using Google Chrome Version 46.0.2490.80 m.
Any help/insight would be greatly appreciated. Thank you.
$("button").click(function() {
$("table tr > *:nth-child(1)").toggleClass("min-width-test")
});
table {
width: 100%;
}
table,
table * {
border: 1px solid black;
}
.min-width-test {
min-width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</table>
<button>Toggle min-width on first column</button>
CSS has no specification for how min-width and max-width are handled by tables, inline tables, table cells, etc. The behavior you are seeing is how Chrome somewhat arbitrarily handles it.
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.
CSS 2.1
This hasn't been changed in any later specs.
As Matt mentioned in the comments, adding min-width is going to increase the size of the column. Tables auto-adjust their size based on their content, and adding a min-width of 50 will thus increase it by 50.
I've copied over your code and made it so you can visualize what's happening. Adding a min-width of 50px is like adding an invisible element of width 50 in there (which I've conveniently made un-invisible and colored red). If you want to counteract that, try removing some margins or padding (although this may break your design--can't tell without seeing exactly what you're doing). Press the "Toggle fix on first column" button to see what I mean.
$("button").click(function() {
$("table tr > *:nth-child(1)").toggleClass("min-width-test")
});
$("#b2").click(function() {
$("table tr > *:nth-child(1)").toggleClass("min-width-test-fixed")
});
table {
width: 100%;
}
table,
table * {
border: 1px solid black;
}
.min-width-test:after {
content: '';
width: 50px;
height: 1px;
background: red;
display: block;
}
.min-width-test-fixed:after {
content: '';
width: 50px;
margin-right: -50px;
height: 1px;
background: green;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</table>
<button>Toggle min-width on first column</button>
<button id="b2">Toggle fix on first column</button>
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.