I try to remove border from attribute in table but it's not work!
border: none;
border: 0;
please tell me what's I'm wrong? and What should I do?
Thanks.
Picture 1
Picture 2
Try to change your
border-box: 0;
to
border-box: none !important;
!important will override if a part of your css below re-edit your border-box. You probably included your css file before your bootstrap / other css lib
did you use "table-bordered" class in your HTML, if you used this class remove the class and run it
try to add
td {
border: none;
}
Hope it'll work.
This should solve your problem
HTML:
<table border="0"></table>
CSS:
table td,
table th {
border: none;
}
You can follow this may be it helps
<table border="0"></table> // Add border attribute in table
or you can also try with css i.e
table tr td,table{
border:0px;
box-shadow:none;
border-color:transparent;
}
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" >
I am trying to use mydaterangepicker(https://kekeh.github.io/mydaterangepicker/) into primeng turbotable (primeng calendar does not comply with the requirements), but it doesn't display well. can you help with some css code or another solution please
I provide my source code, thank you:
https://stackblitz.com/edit/angular-fv53c6
To fix the display of the calendar, instead of hiding inside the cell, putting it out in the open, put this in your app.component.css:
::ng-deep .mydrp { position:absolute !important; }
::ng-deep .selectorarrow { position:absolute !important; }
::ng-deep .mydrp .selectiongroup { margin-left: 12px; top: -18px; display: inline-table !important; border: 1px solid #CCC !important; }
::ng-deep .mydrp { border:none !important; }
::ng-deep body .ui-table .ui-table-thead > tr > th { height:45px !important; }
or check the working demo which is forked against your stackblitz
Your date picker is hidden because its parent's overflow is hidden.
You need to add overflow:visible to the parent of your my-date-range-picker and the div with class="ui-table-scrollable-header ui-widget-header".
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.
I am trying to create a css style that give the same result like native browser highlight so i can put in the css into tinymce.
but from the photo below you can see that the height of the custom css is too low, i tried a few method like using display:inline-block, it works fine for the height but it automatically remove the first and the last space.
Any expert please advise.
Do you mean something like this:
.highlight {
font-size: 14px;
display: inline-block;
color: #fff;
background-color: blue;
padding: .5em 0;
}
Here's a fiddle:
https://jsfiddle.net/c7rdekej/
Create a span around the text you want to highlight and assign a class to it
like highlight
And add css property like below
.highlight {
background:#008AE6;
color:#ffffff;
}
Check this fiddle for clarification http://jsfiddle.net/5u52qw57/
Let me know if it is helpful
Why does the following anchor tag has text underlined?
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none;
}
<a class="pagerLink" href="#">test</a>
Probably because another style block has better precedence than your pagerLink class. Try:
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none !important;
}
use text-decoration:none for a in your styles
Ex:
<head>
<style>
.pagerLink
{
background-color: #E4F5F8;
border:1px solid #C0DEED;
}
.pagerLink a
{
text-decoration:none !important;
}
</style>
</head>
<body>
<div class="pagerLink">
test
</div>
</body>
You can use firebug(a firefox plugin) to findout which style is being used for the element now and whether its being overwritten by some other style definition
http://getfirebug.com/
I cant yet leave comments and I respect this is an old question but be extremely careful when using !important in your declarations:
text-decoration: none !important;
You'll probably get away with it in smaller projects but with any non-trivial project that involves collaboration from multiple sources this sort of thing can be incredibly annoying when it over-rides a property I need to set further down the line. Not only do I have to change this to make my fix stick but I also have to check that changing it does not break anything else, which it probably will.
Better is to refactor your declaration or restructure your code so that you dont need to use !important and only fall back to !important when you cant.
To remove underline you need to follow following style code snippet.
.pagerLink{
background-color: #E4F5F8;
border:1px solid #C0DEED;
text-decoration:none !important;
}