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" >
Related
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;
}
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 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")
css newbie question -
we have a generalized css defined for Table along with its Table Cells as:
.table {
width: 100%;
margin: 1em 0 1em 0;
border-top: 1px solid #A3C0E8;
border-left: 1px solid #A3C0E8;
}
.table td, .table th {
padding: .6em;
border-right: 1px solid #A3C0E8;
border-bottom: 1px solid #A3C0E8;
vertical-align: middle;
background:#D7E8FF;
color:#333;
}
In one scenerio, I want to override td style so that I can show an icon image in front of Table Cell text.
so, if Table Cell is defined as - <td> Vehicle Name & Details </td>
I want to apply style for this Table Cell so that it also show icon image in front of text - 'Vehicle Name & Details'.
I added this style in css file -
.vehicle { background:url(mainFolder/img/icons/vehicle.png) no-repeat left center; }
and added to td as <td class="vehicle"> Vehicle Name & Details </td>
but no icon is being shown. Parent table of this td is <table class="table">
Am I missing something?
Thank you!
.vehicle (one class selector) is less specific than .table td (one class selector + one type selector).
You need either:
a more specific selector (e.g. .table td.vehicle)
an equally specific selector (e.g. td.vehicle) in a rule-set that appears later in the stylesheet
Change your selector to td.vehicle also make sure it appears after .table td selector in your css file.
You can also make the special td's style inline:
<td style="background:url(mainFolder/img/icons/vehicle.png) no-repeat left center;">...</td>
Double check to make sure your URL location is correct. I would first put in an absolute path (http://site.com/mainFolder...) first, then change it to a relative path.
try replacing the background position to
background:url(mainFolder/img/icons/vehicle.png) no-repeat left top;
You can also change the no-repeat to repeat for debuging purposes to see if the image loads.
Also i advice u install firebug (if you are using firefox) so you can manipulate html and css on the fly.
It should work, make sure that the route to the image is correct. And also note that is a background image you are setting, so if you don't want the image to be behind the text you have to use padding --> jsfiddle
i have the following css to put padding around a div:
.orangeAllDay, .orangeAllDay a {
background: #fab384 !important;
color: white;
padding: 5px;
}
it works great until the content (which happens to be inside a cell in an html table takes up two lines. When i look at this in firefox, it looks like its trying to add the padding to each line of the content (even though its all inside one div) so i get some weird overlap of space above the second line that covers part of the first line.
Is there a workaround for this issue or another solution that doesn't break on multiline.
It is adding this padding because you have included both the .orangeAllday and .orangeAll Day a together, so both the link & the elemenent .orangeAllday will get padding of 5px.
You would need to separate them like so:
.orangeAllDay {
background: #fab384 !important;
color: white;
padding: 5px;
}
.orangeAllDay a {
background: #fab384 !important;
color: white;
}
this is done with the assumption that you want padding on the .orangeAllDay element only, but wish to retain background / color for link a.
You've got the padding around the div (.orangeAllDay) and the link. What you are seeing is the padding of the link. There are several ways around this, depending on how exactly the HTML looks like.
If it only contains the link, I'd suggest to actually drop the div and just have the link display as a block:
...
a.orangeAllDay {
background: #fab384 !important;
color: white;
padding: 5px;
display: block;
}