I am new to web development and coding. I might need a little help with something I am trying to get a border around each data cell using CSS below is my code.Please help me. For some reason this is not working.
.table-box table td{
background-color: #ccc
border: 2px soild #000
}
.table-box table td{
background-color: #ccc;
border: 2px soild #000
}
You have to end the statement with semicolon for the last one it is optional
Related
I want to get rid of the frame that is around an Input in SAPUI5 framework. I want to make an input field elevated but the frame around the input field makes it not like desired.
I have tried it using CSS like this:
.cityInput{
border-bottom-color: #FFFFFF;
color: #FFFFFF;
background: none;
min-height: 27px;
border: none;
outline: none;
box-shadow: 5px 5px 7px #808888;
}
I want to get rid of the two yellow lines that surrounds the input field.
Thanks.
I am assuming that you want to get rid of the default (silver/grey) border around the input box. If this is the case then I would suggest making the border color same as your background. Making border=none, on the input class, directly does not work.
.cityInput .sapMInputBaseInner {
border: 1px solid #fdf6b1;
}
I use the Tablepress plugin for Wordpress and I made a border around one column. Here is how I made it:
.tablepress-id-1 .column-2{border-left:solid 4px #fb9901;
border-right:solid 4px #fb9901;}
.tablepress-id-1 .row-10 .column-2{border-bottom:solid 4px #fb9901;}
.tablepress-id-1 .row-1 .column-2{border-top:solid 4px #fb9901;}
It looks like I wanted it, but I have the feeling that there is a way to make is smarter and leaner. (I need to replicate it on many other tables)
Thanks
I would recommend using css custom property for the color:
.tablepress {
--border-color: fb9001;
}
.tablepress-id-1 .column-2 {
border-left: 4px solid var(--border-color);
}
Table border isn't supported in HTML5, but CSS will apply changes to all of my tables, instead of just 1, is there a way around?
I want to make one table to have borders but the "table border" option is not supported in HTML5, what should I do?
CSS will make changes to all of my tables, instead of just one... is there a way around it? :)
For the border, I think you can do :
table {
border: 1px solid black;
}
/* or, for each cell of your table */
td {
border: 1px solid black;
}
If you want to add this style to only one table, then just add a class to this table, and instead in the css something like :
.your-class {
border: 1px solid black;
}
Hope I could help,
I'm doing something like this:
$("#accountsTable")
.append(getHeadersFromJson(json))
.append(getRowsFromJson(json));
$("#accountsTable")
.css("border", "3px solid black");
$("#accountsTable th")
.css("border-bottom", "3px solid black");
$("#accountsTable td")
.css("border-bottom", "1px solid black");
It looks good except I just noticed that the last row has two border-bottom's - one thin for TD and one think for TABLE. I can live with that. However, the perfectionist in me cries a little.
Is there a CSS way to remove the last line style without actually attributing it with a name, id, style etc. during creation?
td:last-child { border: none; }
I think this should do it.
tr:last-of-type td {
border: none;
}
or
$("#accountsTable tr:last-of-type td").css({border:"none"});
Another possible solution is reducing the th border to 2px and then using border-top instead for each td.
Just set the following on your table:
border-collapse: collapse;
You can remove the bottom border from your table:
border-bottom: none
or remove the border for td in the last row:
tr:last-child td{
border-bottom: none;
}
Try the :not selector
https://developer.mozilla.org/en/docs/Web/CSS/:not
td:not(:last-child) {
border: 3px solid black;
}
and if you're worried about browser support, check out http://selectivizr.com/
Is there a way to set multiple CSS properties to one value?
border-left, border-right: 1px solid #E2E2E2;
The way that you can do with selectors?
.wrapper, .maindiv { ... }
Nope. But for your example, you can do this:
border: solid #E2E2E2;
border-width: 0 1px;
The attributes where there can be separate values for top, right, bottom, and left (eg, border-*, margin, padding) can usually be combined in a single attribute.
Not possible, unless you do:
border: 1px solid #E2E2E2;
..which sets the same border on all sides. If you want to control them individually, you have to write them as separate statements.
Note that in some cases, you can set multiple values for one attribute, but you can not have multiple attributes with one value in one statement.
Not possible with plain css, but you may have a look at scss or less who might have solutions for your problem.
A solution with plain css is the following:
border: 1px solid #E2E2E2;
border-width: 0px 1px;
If you're using sass, try this:
#mixin border($properties , $value){
#each $property in $properties{
border-#{$property}: $value;
}
}
selector{
#include border(left right, 1px solid #E2E2E2);
}
CSS does not allow such control. A workaround is to use larger rule, then restrict it:
border: 1px solid #E2E2E2;
border-top: 0;
border-bottom: 0;
But you end up with more code. Another solution is to use CSS "compiler", like SASS or Less
If the attributes are related, as is the case with border-left and border-right, there usually is a common attribute that allows you to set them:
border: 1px solid #e2e2e2;
On the other side, there are some libraries like Less CSS out there that extend CSS so that you can easily group related properties and attributes.