I can't figure it out, why is this table 102px and not 100px in height? Is there another css attribute I need to set otherthan:
table {
border-spacing:0;
border-collapse:collapse;
}
example: https://jsfiddle.net/0enwstw7/2/
There appears to be padding on the <td> tag assigned by default. This should fix it:
td {
padding: 0;
}
The <td> element defaults to having 1px padding, which adds a pixel on each side to make 102px total.
Remove it with td{padding:0;}
It's the padding of the td that adds another 2px;
You have set the up div to be 100px but you are measuring the table.
You can set the padding of the td to 0;
td {
padding: 0px;
}
Try removing implicit td padding which is included into overall size of the table. Sufficed to add some directive like this:
td {
padding: 0;
}
see: https://jsfiddle.net/0enwstw7/3/
Take a look at this.
Your browser (e.g. Chrome) has its own stylesheet and that's why it adds that border-spacing: 2px; to the table.
If you want more information about browser specific stylesheet, take a look at here.
And Yes. Like lots of people here already mentioned it, you can override the setting by adding
td {
padding: 0px;
}
BUT I still think it's important to know WHY this happened.
Hope this helps.
Related
I am using Element UI table for to tabulate my data. My problem is I cant remove the padding inside the cell. This is before I make any changes.
I want to remove all the spaces around the green box. I add this code to remove the padding.
<el-table :data="tableData" size="mini" :cell-style="{ padding: 0 }">
This is after added the code.
Only top and bottom padding is removed but the left and right padding remains. I think the padding is from cell class but I'm not sure how to remove it.
I tried this but it didnt work.
.el-table .cell {
padding: 0px
}
try to make the div padding 0 the container
.el-table {
padding: 0px
}
Based on the Basic Table from the element framework website -- to lose all the padding it would be..
.el-table td {padding:0;}
If you can provide your html in a snippet, you would get specific answers.
.el-table td, .el-table th.is-leaf {border-bottom: 1px solid #ebeef5;padding: 0px;}
This can be achieved by making the padding as 0px.
I Found it on other answer, credits Fab:
https://stackoverflow.com/a/60491030/7270723
Basicly, you should create your class into your style without the scope attribute:
<style>
.selected-cell {
padding:0 !important;
}
</style>
<style scoped>
/* other styles here*/
</style>
Then, into the methods create it:
cellStyle() {
return "selected-cell"
},
finally, in your use :cell-class-name="cellStyle" :
<el-table
:data="tableData"
:cell-class-name="cellStyle" >
In my Angular application (styled with Angular Material) I need to show some data using a Material Table.
This table has a sticky header, several rows and a sticky footer.
By default, rows have a height of 62.5px and I'd like to override this value.
How can I achieve that?
I have tried overriding the css style for tr / tr.mat-row / tr.mat-header-row etc, without success. I have tried using ::ng-deep too.
Also, my sticky footer row has a 48px height, which i didn't set!! Does anyone know whats happening?
Table picture
I'm able to edit the footer row css with ::ng-deep, i have set the font-weight to bold, but when i set the height attribute nothing happens.
::ng-deep tr.mat-footer-row {
border: 1px solid #e7e7e7;
font-weight: bold;
}
Try adding it out on your styles.scss.
tr.mat-footer-row {
border: 1px solid #e7e7e7;
font-weight: bold;
height: #px !important;
}
On a related point, I had an issue where my mat-table rows were too high, and tried to set the height in CSS to reduce it.
It turned out that the problem was "min-height" had been set on "mat-header-row" and "mat-row" somewhere deep inside material (not in my source code).
The fix was simply:
.mat-header-row, .mat-row {
min-height: 30px;
}
To change the height by default (48 px) in mat-table you need to specify a class for every row in the html, for example, when you define the rows:
<tr mat-row *matRowDef="let row; columns: displayedCol;" class="table-row"></tr>
Then you can override the height, setting in your main css file the class 'table-row' with a specific height, for example:
.table-row {
height: 30px !important;
}
We prove this with angular 7 and angular material version 7.3.7.
Regards
With material 5
mat-row.mat-row.ng-star-inserted
{ height: 32px !important; }
.mat-row{ min-height: 30px; }
You can also set it in the mat-row element in the template to an exact value.
Using minHeight is better than height because it overrides the default css.
<mat-row
matRipple
*matRowDef="let row; columns: columnNames"
routerLinkActive="highlighted"
[style.minHeight.px]="100">
</mat-row>
Update for Angular 15 / Material 15:
They've now changed the CSS to use height instead of min-height so height.px would be better. I'm still looking for justification, but my guess would be to try to enforce consistency or perhaps it's performance related.
There's also guidance to just use:
.mat-column-name { height: 100px; } // for column 'name'
It works correctly.
tr.mat-footer-row,
tr.mat-row {
border: 1px solid #e7e7e7;
font-weight: bold;
height: 20px !important;
}
You could specify the height of the table footer in tr.mat-footer-row.
tr.mat-footer-row {
height: 100px;
}
Here is StackBlitz example https://stackblitz.com/angular/gjjjdpjqvvde?file=app%2Ftable-sticky-footer-example.css
The answers are correct but if it doesn't work for you, it probably means you have a div or any element inside the table that has a height set to it, and if this height is greater than the row height you won't be able to override it.
I had a similar problem; in my case, the height of the table was too large relative to the number of rows, so setting the height didn't work. When I adjusted the height to be smaller when I had fewer rows, I was able to set the height again.
my solution:
.mat-header-row{
max-height: 40px;
height: 40px;
min-height: 40px;
text-align: center;
}
Use this on your style.css
.mat-row{
height: 10px !important;
}
I have a table where I set a kind of button on mouseover the cell. Then problem is that when I move between columns, we can see the current column a little more wide than others. Difficult to explain.
Here is a little video of demonstration: http://screencast.com/t/WbHIlSHim
How can we avoid it?
Here is my css
#MatrixTable td
{
padding: 0px;
height: 30px;
text-align: center;
vertical-align: middle;
}
#MatrixTable:hover
{
cursor: default;
}
#MatrixTable td a:hover
{
cursor: none;
}
#MatrixTable td:first-child
{
padding-left: 5px;
text-align:left;
}
#MatrixTable td a
{
padding: 8px 10px;
cursor: default;
}
Thanks.
UPDATE
Here is a jsfiddle: http://jsfiddle.net/Q35f7/
Well, most generally it's because the CSS changed when you added the new class, adding a whole lot of other stuff. The offending changes that created the size change were padding, border and a few others, which will always alter the size of the object.
For example, if you added .class:hover{border: 500px solid #000;} on mousover, that element would get a heck of a lot bigger when you hovered over it. A similar effect would happen if you did .class:hover{padding:9999px;}. See what I'm getting at here?
I've edited it for you removing the style rules that would create the "annoying" size change:
http://jsfiddle.net/Q35f7/1/
I am struggling with a cell padding issue in a given HTML table (generated by Drupal).
The table is the following:
I tried the following:
.view-thumbnails-of-tips-and-tricks {
padding: 10px 10px 10px 10px;
}
I want to adding padding around cell content as following:
Unfortunately, the padding goes around the table, rather than the cells' content. How can I solve this?
.view-thumbnails-of-tips-and-tricks tr td {
padding: 10px;
}
Specify td after your class:
.view-thumbnails-of-tips-and-tricks td {
padding: 10px;
}
Also, make sure to set cellpadding to zero in the HTML in case user-agent stylesheets provide their own value. This value may override or add to the CSS value.
<table cellpadding="0">
You should set css to that cell, not the holder.
So you can set class name for that cell and customize the css.
e.g: .view-thumbnails-of-tips-and-tricks td { padding: 10px; }
Hope this help
Try defining your style like this:
.view-thumbnails-of-tips-and-tricks td {
padding: 10px 10px 10px 10px;
}
It means that you are defining style for:
top div (identifier ".view-thumbnails-of-tips-and-tricks")
table inside that div ("td")
Am trying to use CSS3 to set the cell-spacing and the cell-padding for my table since HTML5 doesn't support these attributes.
I have found many resources on the internet says that you should use border-spacing and padding using CSS.
Unfo. i tried all these tricks , but it seems that no thing changing at all. The spacing is very important because am including image structure on the different cell of the table.
So how i can solve it now ? plz need your help
#SearchTable
{
border-collapse: collapse;
padding:0px 0px 0px 0px;
}
#SearchTable td
{
padding:0;
border-spacing:0px 0px;
}
For cellspacing:
Set border-spacing on the table, not on the td.
Set border-collapse to separate.
#SearchTable {
border-collapse: separate;
border-spacing: 8px;
}
You have not set id=SearchTable on the table, or you have some other stylesheet rules that override those that you specify. As such, the rules you posted are more than sufficient for the effect; you only need
#SearchTable
{
border-collapse: collapse;
}
#SearchTable td
{
padding:0;
}
(which are already in CSS2).
You need to set it like this. It worked for me.
#SearchTable {
border-spacing:2px 2px;
border-collapse:separate;
}
#SearchTable td {
border:1px solid black;
}