I have a fake table (divs rendered as a table).
There is only one row with 6 cells. The last one of them i set to position: absolute, and the table is set to table-layout: fixed.
Now the plan is to have the 5 first cells take up 20% each and the last one taking up no space. (as it needs to be moved outside of the box).
For some reason the table-layout: fixed also counts in the cell with position absolute meaning that each cell is given around 16% each.
The thing is that I need to be able to use the same css if the table all the sudden goes to 10 (+1) etc.
I have made a fiddle showing off the issue here.
https://jsfiddle.net/nxy0d023/
This is my css (simplified)
.table {
display: table;
width: 100%;
position: relative;
table-layout: fixed;
}
.table div {
display: table-cell;
height: 10px;
}
.table .last {
position: absolute;
left: 0;
top: 20px;
width: 20px;
}
It is possible that I set each cell to a size if needed but that does not work sadly.
You can add width: 100% to the .table div.
jsFiddle
Related
I have a table that displays text fetched from an API using JS and because of that a lot of my cells have different length. I've been trying to create a table with a vertical and horizontal scroll, which I managed to do but I can't seem to figure out how to adjust table row length so that entire text is shown, instead of being cut out. I would like for a cell to have a maximum length and if that length is exceeded the text is shown on the next line. This might not be doable with css only but any solution is welcomed.
Here is a quick look on my issue
Here is part of my CSS for the Match History Table
* {
box-sizing: border-box;
}
.table2 {
position: fixed;
top: 450px;
left: 400px;
border-collapse: collapse;
width: 1001px;
overflow-x: scroll;
display: block;
}
.table2 tbody {
overflow-y: scroll;
overflow-x: hidden;
height: 300px;
}
.table2 td, th {
min-width: 100px;
height: 25px;
border: dashed 1px lightblue;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
1st part of your issue is some cells needing longer lengths than others, so you could set the colspan for those longer than the others.
2nd part is by setting a max-width on those columns you can program how they behave when text is too long for the cells width. If you already know which column's cells will need more room, try adding a larger max width for those cells which will affect all cells in that column.
td:nth-child(1) {
width: 100px
}
td:nth-child(2) {
max-width: 400px; /* Comment this line to see the width stretch based on cell's
content */
}
I have included a working example of how you should set colspan and a modified version of your CSS here: https://codepen.io/TxsAdamWest/pen/NWbOwRW
I managed to fix my issue by adding a class with a min-width attribute to the headers that needed their length adjusted and as for the body, since it is generated dynamically using JS I did the same thing using cell.style.minWidth to a specific row.
I have this example for the very known fill-parent height problem: http://fiddle.jshell.net/y9bM4/379/ I've really tried to find a solution by googling but I cannot find anything for these requirements:
The height of the element is not known, neither by percentage nor by absolute size. So position: absolute; top: ?px; bottom: 0px would not work
The upper box should only take up the space it needs for its content, so with my little knowledge about flexbox, it seems that I cannot use it either (just used it in the example because this is kind of as closest as I got)
The outer container has a fixed height (90% of the body in this example)
It would be nice if flex: 1 in each container, is kind of the maximum growth of the upper container. Is this even possible with css yet?
I'm not exactly sure what you're trying to do, but I'm assmuning you would like the second container to use whatever space is left over after the first container is sized to its content.
If so, set the .content class with height:0 and flex-grow:1
UPDATED EXAMPLE:
http://fiddle.jshell.net/y9bM4/385/
I think problem was that you gave the container id height:90%; so it will have to forcefully cover inside it, which is not posibble, So change it with height:auto;.
This will solve your problem
JSFiddle : Updated
CSS : Code to change (Edited)
#container
{
display: block;
position: fixed;
height: 90%;
width:100%;
overflow: hidden;
background: #fff;
border:2px solid green;
}
.content:nth-child(2)
{
position: relative;
display: block;
overflow: auto;
height: 100%;
}
.content{
border:1px solid red
};
.text
{
height: 100%;
display: block;
}
I am trying to setup a form such that:
All inputs will be horizontally aligned, even when they have no label.
Inputs will be vertically aligned within their row for when the label wraps.
The inputs will stretch to fill the remaining space (or squished)
The submit button will fill an entire row.
I have achieved the first and fourth requirements but I am having trouble with making the inputs fill the row and be vertically aligned.
Here's my progress so far:
http://jsbin.com/kozozabo/3/edit?html,css,output
The LESS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
#narrow-form {
width: 300px;
overflow: hidden;
padding-right: 0.5em;
}
#wide-form {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin-left: 300px;
}
.row {
#label-width: 100px;
width: 100%;
overflow: hidden;
label {
width: #label-width;
float: left;
display: inline-block;
}
.no-label {
margin-left: #label-width;
}
input, select {
/* Trying to make these aligned to the right of
* their respective labels filling any remaining
* width.
*/
display: inline-block;
}
button {
width: 100%;
}
}
I tried giving the inputs absolute positioning with a left margin of the same width of the label but that didn't work.
Okay I have come up with a solution that I am happy with. It does involve some table abuse unfortunately.
I have only tested this in Chromium.
http://jsbin.com/kozozabo/5/edit?output
I set the form to display: table, each .row to display: table-row and the labels, inputs, selects and buttons to display: table-cell.
This made everything line up and fill all available space.
I then added two new classes intended to be affixes to the .row class, this is where the real table abuse begins.
.no-label - With the intent of "skipping" the first psuedo-cell. To accomplish this I defined it as such:
.no-label:before {
content: "";
display: table-cell;
}
Essentially inserting a hidden cell, forcing the subsequent inputs to be in the second column.
.full-width - With the intent of making it's contents the full width of the "table". To accomplish this I defined it as such:
.full-width {
display: table-caption;
caption-side: bottom;
}
A table caption spans the entire width of the table. I know I am only going to do this to the button so I forced it to be at the bottom with caption-side.
It would have been better to just define the DOM as a table but I didn't want to reprogram the javascript that was setting up this form. I always wouldn't get to of played with css, all be it in a menacing manner.
I would like to create a table with fixed header height (f.ex. 20px) and other rows height should be defined by percentage of the container (f.ex. 12%).
Row number varies from 4 to 6 and that is the cause that my table behaves in a wrong way. Height of header changes depending on the number of rows, despite it being defined in the css (min-height, height and max-height to be sure).
Here's a sample CSS:
#container
{
height: 800px;
}
#t1
{
border-collapse: collapse;
table-layout: fixed;
//height: 100%;
border: 1px solid black;
}
#head_row
{
height: 20px;
max-height: 20px;
min-height: 20px;
}
tbody tr
{
height: 12%;
max-height: 12%;
min-height: 12%;
}
tbody td
{
border: 1px solid black;
height: 12%;
max-height: 12%;
min-height: 12%;
}
Here is a sample JSfiddle of what I'm trying to achieve, but without setting table height to 100% it doesn't work and I commented it out.
jsfiddle here.
What did I forget or what am I doing wrong? Is there any way to do it using only HTML and CSS?
EDIT:
I'm trying to make a small calendar (I didn't write it earlier) and I just looked up how google does this:
Google calendar
They have header as one table and every row as a div with a one-row table inside it...
Well, I believe that people at Google know what they're doing, but is there really no simplier way?
Define your table height as follows.
height: 100%.
Which will refer Container height as you have defined. (min-height :800px; for Container div is more conventional so that Container div can grow in case of more data).
height: 800px;
If you remove Container height the table will shrink back to minimum required height.
What I'm trying to do is to have a line with two parts, and the last part should be always visible while using text-overflow: ellipsis for the first one. Like this :
[[foo][bar] ]
[[lorem i...][bar]]
So I used display: table for the row and display: table-cell for the parts. And it works fine I add table-layout: fixed to the row, but that leaves empty space in the second cell.
Here is the fiddle containing what I tried: http://jsfiddle.net/ybouhjira/2vWKm/1/
It depend on #wrapper width
go change wrapper width to 400px
and add this code
#cell1 {
width: 20%;
}
#cell2 {
width: 99%;
}
http://jsfiddle.net/2vWKm/2/