the closest I have come is to use "very basic" attributes, but the rows still have borders between them. Any ideas? Thanks
based on https://github.com/Semantic-Org/Semantic-UI/issues/1980
Using ui very basic table class and this custom css:
.ui.table tr td { border-top: 0px !important; }
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 creating a website and I used google custom search for it. When I trying to add a border for th, td they also applied for my GCSE. It looks ugly when it appears there. I am trying to figure out how can I use my CSS code all table except google custom search. Here is my website, https://vendabariulo.gov.bd/citizen-charter/
Here is my code,
th, td {
text-align: left;
padding: 8px;
border: 1px solid #ddd;
}
Here is my search button screenshot, there shows a border around it. If I remove border from th, td it looks beautiful.
enter image description here
You could try to style the Google Custom Search itself.
This rule might help you
gsc-search-box th, gsc-search-box td {
/* apply your rules here as you like.
For example, border:none; */
}
Thanks all. After thinking and trying half an hour, I figure out something. It's work for me. I think it's a valid CSS rule.
I add a div class to my google custom search code and add this simple code,
.gcse td, th, tr {
border: none;
}
Use :not() CSS pseudo-class as doctrine in developer.mozilla.org
table:not(table.gsc-search-box){
/* your style definition */
text-align: left;
padding: 8px;
border: 1px solid #ddd;
}
Hope it helps.
I have a page where I need to display borders within a table and I'm using w3.css, this has the following:
table,th,td{border:none}
I have my own css file and have tried:
table,th,td{border:1 !important}
With and without "!important", after doing some searches I have also tried:
$("table").removeAttr('style').css("border","1");
$("th").removeAttr('style').css("border","1");
$("td").removeAttr('style').css("border","1");
I have tried the above with .table, .th, .td and have tried "1px" too.
I know that I can change the w3.css by removing the border settings and it works just fine, however, I would prefer not to do that.
border is a shorthand property for border-type, border-width, and border-color. You need all three properties.
table {
border: 1px solid #000;
}
I have an HTML table with numerous columns. I want to set text-align: center on all columns except one.
I've heard that both using !important and unnecessary nesting is frowned upon. What is the "best" way to achieve this?
Using !important:
#my-table td {
padding: 5px;
text-align: center;
}
.my-table-special-td {
text-align: left !important;
}
Unnecessary nesting:
#my-table td {
padding: 5px;
text-align: center;
}
#my-table .my-table-special-td {
text-align: left;
}
Or some other method?
By "best" I mean:
* Conformance to CSS best practices
* Good performance
For performance wise, use inline styling for all your css. This is the technique used in google mail (Gmail) and I think Yahoo! mail as well. So if it's speed you want. Use inline style for everything. Honestly I wouldn't go that route because it does not offer clean and re-usable code.
So I would go with the cleanest solution which is giving the element a class name and avoid using !important. It is definitely frowned upon and it does not have to be used to be honest. The table will respect your class name on your table element. This offers a more clean CSS in the end that works on all browsers. If you are overriding classes in General, it means you might want to rethink the architecture of your CSS. I do not mean you are doing it the wrong way, but we are talking about the best way of doing things aren't we? :)
Happy coding!
Do not use !important, unless you do not have any other choice.
#my-table td {
padding: 5px;
text-align: center;
}
td#my-table-special-td {
text-align: left;
}
you do not have to do any nesting. just use id istead of class and add tag name in front of it as you can see in the above code.
here is an example of it jsFiddle
Personally, I use !important for "overriding" classes. Things like:
.center {text-align:center !important}
.right {text-align:right !important}
And so on - if I specify class="right" on an element, it's because I specifically want it right-aligned and !important helps reflect that.
However in more general cases, you should avoid !important - mostly because once you've used !important, there's no way to override it any more!
You should do it like this:
.tableAll td{
padding: 5px;
text-align: center;
}
and you just want to center only so why define class. Inline style will work in this case and will override matching style of .tableAll.
<table class="tableAll">
<tr>
<td style="text-align: center;"></td>
<td >other all</td>
</tr>
</table>
I don't recommentd using !important.
Actually, both solutions are fine using !important and nesting,
You should not use !important too often, because once it spreads and you use it over and over again, you will be back at the beginning (difficulty in specifying elements specific to override other styles, applied),
but in that particular case you are fine since the !important rule only affects 1 element.
Nesting also works good, as long as you use it for special cases and not for every single element, because once you do so, your code will be unreadable and you will have a very hard time in improving and re factoring.
#my-table td {
padding: 5px;
text-align: center;
}
#my-table td.my-special-td {
text-align:left;
}
Arguably you don't need the #my-table selector as you stated you wanted to all td elements to be aligned to the center.
A more reuseable approach would be to remove the id and just have:
td { text-align:center; }
td.left-align { text-align:left;}
td.right-align {text-align:right;}
Then you can apply the alignment to any td anywhere, as well as override if you need to by adding an id to the table later on.
I won't recommend to use !important . In your case using text-align: center you can center the text and if you want for any column text should be left-align you could make a particular class for that column or better use some advance level CSS3.
In this example I want to change the Last Column of Last row and want to apply class.
I can do this by adding this style.
table tr:last-child td:nth-child(5) {background:red;}
Or better check this example. http://jsbin.com/mizotofe/1/
I have two different style definitions for tables:
table {
border: solid 1px #E8EEF4;
border-collapse: collapse;
}
Because my specific table is inside a <div class="checkboxquestion> i have a special style definition for tables inside this class:
.checkboxquestion table
{
border: none;
text-align: center;
}
The problem is, that border: none; is overriden by border-collapse: collapse; - and every other styling option is overriden by the "default" definition.
How do i solve this?
I think you made another mistake, it works for me the way you did it: Have a look at this fiddle
Perhaps you didn't close the quotation marks for the div's class as you did in the question?
div.checkboxquestion table is also an option ;)
and make sure the specific definition comes after the universal definition.
make a new class and apply it to the table inside of .checkboxquestion
Like:
table, .tabelClass {
border: solid 1px #E8EEF4;
border-collapse: collapse;
}
then apply it to your table:
<table class="tabelClass">
Don't go into specificity wars, especially with yourself.
Define all the common table styles by using selectors like table, tr, td, etc.
If you have two different styles of tables, give them two different classes.
If this is a "one time thing", and you really need everything to be the same:
.checkboxstyle table {
border-collapse: separate;
text-align:center;
border:none;
}
I'm not 100% certain what are you trying to do, but if you're trying to make the border invisible, it would be easier to just color the border in the background color.
.checkboxstyle table {
border-color:blue;
}
You can learn more about specificity here: http://htmldog.com/guides/cssadvanced/specificity/
And remember, forget everything there as soon as you read it, because you don't want to be calculating specificity. If you find you're doing so, you're writing bad css.