Autosized table of 100% width - javascript

I'm building some sort of reporting-functionality where the user can select a number of elements to be part of the report.
The number of possible elements can vary depending on the users needs.
Also the content for each element can vary as of this is user-content.
The report(s) can be printed via browser, exported as pdf or just previewed in browser. It's also possible to set landscape/portrait mode to get what fits the needs best.
Question: Is there any way to make the table always 100% width (e.g. DIN A4 size for printing) and have the column-widths matching there content overflowing at some given point?
If I set the table-style to
.reportTable{
width: 100%;
min-width: 100%;
max-width: 100%;
}
and the style for th to
.reportTable th{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
the rendered table has the correct size and all columns the same size with it's content hidden in case it is too long.
And here is the problem. If one column only shows a number it takes the same space as the column showing the name of an user. For printing (where space is not infinite) this is lost space which can be used for other things which may get cut off.
Changeing it to
.reportTable{
width: auto;
min-width: 100%;
max-width: 100%;
}
will size the columns depending on the content. But, if the content is too long, the table will be bigger than 100% (some kind of out of bounds).
Is there any way doing this with pure css or do I need javascript/jQuery (which for sure is an option)?
No plugins or something external.

You may keep table width at 100%. whatever screen size be there it will set as per resolution. for th table header define width in "%" so that it can take width of column in that proportion. If numbers are in td set respective th at lower width %.

Related

Resize React Bootstrap Table column sizes with fixed minWidth

I have a Bootstrap table where the columns are toggled. Due to the number of columns, I need to use horizontal flow to make it all fit inside. However, the size of the header and the column itself gets too small to a point that it's unreadable. So I have to set up a minimum width for each column.
So, the columns should be in the whole table length at all times, and adapt the size to fill it all. However, when I am using the fixed minWidth and there are not many columns, the columns do not resize to fit the whole table. In the image below, the red square should not be appearing, but filled with the columns.
I have created a sandbox link with the table that does not resize correctly.
https://codesandbox.io/s/eloquent-almeida-9lgp2?file=/src/index.js
I have searched stack overflow to help me with the horizontal overflow, this is the CSS I have used to do so, by the way. I think this is the reason why the columns are not resizing as they should.
#table-employee-compensation {
overflow: auto;
display: block;
width: auto !important;
table-layout: auto !important;
}
Thanks for your time to read this!
I have solved by adding overflow: auto to .react-bootstrap-table, removed width: auto !important; and changed display: block; from the #table-employee-compensation class. Working as intended.

Making multi-column inline-block container to fit the contents width

I'm trying to create a horizontal layout of fixed height, inline-block elements that contain CSS columns in it.
article {
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
-moz-column-fill: auto;
column-fill: auto;
height: 350px;
display: inline-block;
}
The problem is that the width of inline-block elements is improperly set (columns take up less/more space than container provides) - it seems that the width corresponds to the content before it is being transformed into columns (in Chrome - in result containers are on top of each other) or fits single column (in Firefox and IE - in result containers overlap).
Example (inspect the width of article element):
http://codepen.io/anon/pen/yNQdVE
The only solution I came up with is to make container fit single column and use JS to set width to the scroll width. Is seems to work fine in all 3 browsers I tested.
Example:
http://codepen.io/anon/pen/gpQNWg
Is there any pure CSS solution to this problem?
Changing the display from inline-block to table-cell seems to give you desired results.
Seen in this pen is that style applied along with borders for visual aid.
http://codepen.io/TheLarkInn/pen/jPQjzK
It appears that although it is an inline-block element, that the browser assumes the second column stretches the width of the viewport despite having a width of 300px per column.
You can also wrap all the articles in an element using display: flex; also.

Detecting table cell collisions on window resize

I'm attempting to use jQuery to allow me reduce the size of a table's text before any table content exceeds the with of its parent column on window resize. I know I can easily check the width of cell content against its parent table cell to detect collisions, but this method seems inefficient given that this might need to be done across 1000's of table cells every 100ms or so as the user resizes.
Does anyone have a more efficient method?
Pseudocode below:
On resize (throttled)
If any table content has less than 10px until it exceeds the width of its containing column
Do stuff
You shouldn't need to check every cell in the table, just the top row of cells.
Alternatively, you could set a min-width of the table cells, then use css3 text-overflow: ellipsis
table {
table-layout: fixed;
}
td {
border: 1px solid black;
min-width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
What might be an even better alternative is making a responsive data table. Check out this article on CSS-Tricks showing different methods on dealing with wide table data.

How can I have a table with a set height but auto height cells

.suspensionTableScroll {
width: 100%;
height: 180px;
overflow: auto;
}
I have the above CSS. the table is 180px which is good but the data inside it is not aligned to the top. rows are added in the middle with a large height that gets smaller as I add more rows.
How can I make their height auto depending on their content text?
I have tried vertical-align:top and vertical-align:text-top but the rows still appear in the middle
Maybe you want to set height of outer element in which you place the table instead?
Update:
table cell heights are adjusted automatically and dependent on the table height.
use max-height instead of height, so table cell heights will be dependent on their contexts and your table height won't be more than 180px.

Calculate the remaining width of an element

I just need help making an element fit the remaining space of a div, that is covered by a fixed position element.
Over-simplifying: I have a left-fixed menu and it has 25% of total width BUT a limit: max-width: 350px and min-width: 280px.
I also have a center aligned div that has 80% of width.
I want to put content in the second div, between the point where the divs touch, and the left margin.
I already tryed to put a spacing div between the div start and the menu end, (to the content take the rest of the space), but i reached the conclusion that it is imposible to make those calculations with css due to the min and max widths. (If i change the screen res. the width may change OR NOT).
How can i fix this?
Its javascript a good idea?
I think either this fiddle or this fiddle may get you what you want. In either case, I used a pseudo-element to generate a float to space it.
#container:before {
content: '';
display: block;
float:left;
margin-left: -12.5%; /* push float to left edge based on 80% container width */
width: 31.25%; /* make float 25% of total width based off its 80% container */
max-width: 350px;
min-width: 280px;
height:100%; /* or 90% in first fiddle */
}
The second fiddle also has overflow: hidden set on the #content if you want it kept right always. Both also require a height: 100% set on the body and html tag.
you can use this type javascript
var a =$('#id of outer div').height();
var b = $('#id of inner div').height();
var c = a-b;
$('#id of filling div').css("height",c);

Categories

Resources