I create table and fix head and body but I can't scroll it with this CSS:
.t1 tbody {
height: 100px;
overflow: auto;
}
.t1 thead > tr, tbody {
display: block;
}
so I find this link :
http://jsbin.com/bipusabici/edit?html,output
it's work great but my problem is that structure of table is different of normal table with thead and tbody.
This is my fiddle and I want scroll it with this normal table structure:
http://jsfiddle.net/snicee/46jzhs94/3/
You can't do it by using table with auto widths in css but you can do using fixed width coulmns in css
Related
Hi I have a tabulator table which the headers are all icons
I want to add in a fitler box for one field but when I do so using the headerFilter:true the filter is below the icons
is there any clever way to have the filter on the same level as the icons, space is a premuim on my page so ideally Id like them all aligned
I've solved this by modifying the tabulator css I had to give the header-filter a negative top position and it now works fine
`.tabulator .tabulator-header .tabulator-col .tabulator-header-filter
{
position: relative;
box-sizing: border-box;
margin-top: -23px;
width: 100%;
text-align: center;
height: 33px ;
} `
After a lot of tinkering I finally have a decent setup for my material table. It's got pagination, it's got sort, it's got all the goodies I need. However, it looks off because several of my columns are single digit values, and they have the same width as columns I would prefer to be larger (like the description which is wrapped excessively).
Being inexperienced in scss (and css for that matter) I'm at a loss for how to fix this. I attempted tinkering with the flex property in just about every way I could figure out, and it doesn't appear to change a thing on the table.
This issue is further complicated in that I cannot easily use the 'hack' of the material table generating classes based on the column identifier, as the columns are generated dynamically. I could pass in width information as well, but that seems like an unmaintainable hack.
Is there a way to apply styling to the entire table and header that would get me the desired look?
I used this successfully with Angular10.
First, wrap your table with a div, like this:
<div class='table-responsive'>
<mat-table>
....
</mat-table>
</div>
then add this CSS
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}
.mat-table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
display: table;
border-collapse: collapse;
margin: 0px;
}
.mat-row,
.mat-header-row {
display: table-row;
}
.mat-cell,
.mat-header-cell {
word-wrap: initial;
display: table-cell;
padding: 0px 5px;
line-break: unset;
width: auto;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}
This will size the cells according to the content, and make your table horizontally scrollable!
Assuming that you do mean the angular material table, this one might help:
md-table - How to update the column width
Use the below style for columns width and header
columns={[
{
title: 'Create Date',
field: 'create_date',
cellStyle: {
whiteSpace: 'nowrap'
},
...
]}
options={{
headerStyle: {
backgroundColor: '#DEF3FA',
color: 'Black',
whiteSpace: 'nowrap'
},
I use the Kendo UI grid in my project to present my data.
I have a trouble about the its row height. When the grid is initialized; the row seems very odd. I tried to give some informations about the grid's back. The console screen contains some informations about the grid's initialization. You can glance through the enclosed picture.
.k-grid tr td {
border-style: solid;
border-width: 0px 0 1px 1px;
border-color: #c5c5c5;
}
Column contains long multiline texts which make row height too big.
I tried styles below based on Tony's answer in
http://www.trirand.com/blog/?page_id=393/help/possible-row-height-bug-in-in-ie8/
but those do not limit row maximum height: Row height is still equal to by number of lines in column.
How to limit maximum height of row to some value? Text should not wrap (as it already is using jqGrid default settings) and remaining rows should not shown. (Whole text can examined in edit mode if edittype textarea is used).
jqgrid tr.jqgrow td {
max-height : 100px;
}
ui-jqgrid tr.jqgrow td {
max-height : 100px;
}
td {
max-height : 100px;
}
tr {
max-height : 100px;
}
You can't use max-height on td or tr elements, but you can place the multiline text inside of the <div> having the same style. To do this you can use for example the following custom formatter:
formatter: function(v) {
return '<div style="max-height: 100px">' + v + '</div>';
}
or place the <div style="max-height: 100px">...</div> inside of your JSON/XML data. As the result you will have something like
(I displayed tooltip during I made the screenshot to show that the data in the cell contain more lines as displayed in the grid)
See the corresponding demo here.
I know this is late, but you can use this CSS for ALL columns:
.ui-jqgrid tr.jqgrow td {
white-space:nowrap;
}
Or, for an individual column:
.no-wrap-col {
white-space: nowrap;
}
Then in your ColModel, on whichever column you want to prevent wrapping on, apply the class:
classes: "no-wrap-col"
I'm using facebox ( https://github.com/defunkt/facebox ) with same code downloaded from github without any modification except remote.html
I JUST added this code in remote.htmlTABLE in facebox window with this code:
Hello
World
I'm remote.html, a different file loaded with ajax.
I'm remote.html, a different file loaded with ajax.
PROBLEM: There is NO CELLPADDING on facebox window.
How can I solve this problem?
OR ANY OTHER SOLUTION TO REPLACE WITH FACEBOX?
Regards,
Nuri Akman
It's because the facebox.css file contains this:
#facebox table {
border-collapse: collapse;
}
Remove it or override it with other CSS.
On version Facebox 1.3 add this code in facebox.css:
#facebox .content table tr td { padding: 4px; }
#facebox .content table tr th { padding: 4px; }
#facebox .content table { border-collapse: separate; border-spacing: 1px; }