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.
Related
For example,
I have a bunch of div's side by side, and each div has a border-right:1px
The parent element is a certain width so at a certain point, the extra div wraps to the next line.
In essence, I do NOT want a border-right for the last div before the wrap.
If this doesn't make sense, I can create a fiddle. I just want to know can I target that last div before the wrap. (last-child will target the last div that is on the next line which isn't want.)
Figure out how many columns you're getting with the current width, either hardcoded or with JS and then use the nth-child selector.
For example if you have 3 columns per row with each div having a class of col it would be
div.col:nth-child(3n){border-right:none;}
The nth-child selector can be modified depending on however many columns are in each row of divs.
There is no way to select the last item from multiple lines, only the :last-child.
If your elements line up in columns, the multi-column module may be of interest to you. It has a column-rule property that's similar to borders, but only appears vertically between columns, never on the outer edges.
http://cssdeck.com/labs/febtiiet
.container {
columns: 20em;
column-rule: 1px solid;
}
Prefixes may be required: http://caniuse.com/#feat=multicolumn
Otherwise, you will need to switch to placing the border on the left as MrLister suggests:
http://cssdeck.com/labs/f8qjngd4
.container {
overflow: hidden;
padding: 0;
border-style: none;
}
.child {
border-left: 1px solid;
position: relative;
left: -1px;
display: inline-block;
width: 20em;
}
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.
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 %.
Here is what my code looks like:
The JSFiddle code is here. The problem is in the css using display: block
tbody.scrollContent
{
**display: block;**
height: 262px;
overflow: auto;
width: 756px;
}
but i need to use this to get the scroll bar as shown. But when i resize the headers by left clicking the vertical bar on the header and then scrolling left or right the thead and tbody doesnt match. If i remove the display: block then everything works correctly but i lose my vertical scroll bar. Im using jquery ui resizable plugin to try and resolve the issue and they when i do a console.log on both the thead cell and the tbody cell are the same.
Ive read some other post but cant seem to really get it to work with mine. Any help would be appreciated.
Update - 1/31/2014
My final solution was to take my code and just split the thead and tbody into two different tables. What i did was create two tables. The first one is just the thead and the second one is tbody. That way i can still keep the functionality with the scroll bar only on the tbody. And just made the thead width 16px longer so it expands over the scrollbar. I did this because of the problem with table-layout: fixed and breaking the thead and tbody alignment. Thanks for the help others have pointed out.
Here is one possible solution that might work for you:
CSS: EXAMPLE FIDDLE
tbody.scrollContent {
//display: block; <- remove this entry
height: 262px;
overflow: auto;
width: 756px;
}
div.scrollContainer {
// existing styles
overflow-y: scroll; //<-add this
overflow-x: hidden; //<- and this
}
.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.