i used:
border: 1px 1px 1px 1px;
border-style:solid;
but the border line seems to be so thick. i can almost be sure that i have seen thinner border line somewhere. could you make it thinner or did they use images for it?
** Copied from my comment on the question itself **
Actually, I just noticed that you have the border short-hand declaration, which expects several parameters in a precise order. (ie. border: 1px solid black) What you have specified above is invalid. Could that be your problem?
Instead of
border: 1px 1px 1px 1px
try
border-width: 1px
Perhaps a lighter color was used on the border, (silver instead of black) which often gives the illusion of being thinner.
If you mean the borders around the table cells then they will appear thicker because they aren't "collapsable" - you have to write this:
table {
border-collapse: collapse;
}
and it should make the borders on every side of a cell one pixel thick (or thin as you want to call it!) within a table.
You may try consolidating your rules into a single short-hand declaration:
border: 1px solid black;
Related
I have a Template constructed out of many Cells as part of a Form. I wrote several Types which have borders background colours and so on, so that i , in the end, could apply them to the cells at the edges and construct a box around the whole Information by putting them together. To make it clear here an example of what i try to do:
if you had 9 cells in form a cupe the middle top one would just have a border on the top the top left one would have borders on the left and the top and so on. That works well for the "straight" parts, in this example the middle parts of every side.
But the corners just don't appear neither the background color or the borders.
What i tried is basically that . I wrote the following code for the bottom right corner:
.brechtsunten {
background-color: #81a0e9 !important;
border-right: 2px solid !important;
border-bottom: 2px solid !important;
border-color: #183b8b !important;
}
And it does nothing , and by nothing i mean it doesn't even appear in the style filter of the inspector section if i open the form extern in my browser, so i get nothing i could work with like a syntax error message.
You have to specify the border property if you use border-bottom
Example
border-bottom-width: 33px;
The correct way to write your CSS
background-color: #81a0e9 !important;
border-right-width: 2px;
border-bottom-width: 2px;
border: 0px solid #183b8b;
}
I am unable to add borders to the tabulator table using the tabulator 4.2.3 css file.
I've tried changing the -is-bordered classes but the displayed table show no border. I find the Bulma theme pleasing but need borders to make it more table and data entry friendly for my users.
CSS section referenced below:
.tabulator.is-bordered {
border: 1px solid black;
}
.tabulator.is-bordered .tabulator-header .tabulator-col {
border-right: 1px solid black;
}
.tabulator.is-bordered .tabulator-tableHolder .tabulator-table
.tabulator-row .tabulator-cell {
border-right: 1px solid black;
}
I thought I would have 1px Black border around each cell and header, but it still shows as no border.
The is-bordered class is working in v 4.4.3.
Are you sure you are only including the tabulator_bulma.css. if you include the tabulator.css as well the two will fight against each other.
QTableWidget headers have no horizontal lines in Windows 10. How can I fix it?
I had the same problem. It can be solved with the following style sheet on the table view/widget:
if(QSysInfo::windowsVersion()==QSysInfo::WV_WINDOWS10){
setStyleSheet(
"QHeaderView::section{"
"border-top:0px solid #D8D8D8;"
"border-left:0px solid #D8D8D8;"
"border-right:1px solid #D8D8D8;"
"border-bottom: 1px solid #D8D8D8;"
"background-color:white;"
"padding:4px;"
"}"
"QTableCornerButton::section{"
"border-top:0px solid #D8D8D8;"
"border-left:0px solid #D8D8D8;"
"border-right:1px solid #D8D8D8;"
"border-bottom: 1px solid #D8D8D8;"
"background-color:white;"
"}");}
This is C++ code but it should be easy to adapt to your needs.
Note1: The background-color and padding are unfortunate but they are necessary to make our custom rendering looks like the default one.
Note2: The color of the border is the color of the grid on my system. I did not use the color of the default header.
Note3: The QTableCornerButton::section part is necessary to add the missing border below the top left corner. If the vertical header is not visible, the missing line is invisible too.
Note4: If (like me) you find that the ugly grey rectangle below the name of your rows needs fixing, just add QHeaderView{background-color:white;} to your style sheet.
Hope this helps.
set this stylesheet in tablewidget.
QTableWidget ::section {
border: 1px outset #161618;
}
What is the best CSS practice to achieve a border on all sides of a container, apart from, for example, the bottom?
The border property cannot specify different values for each side.
Option 1: Overwriting Rules
border: 1px solid red;
border-bottom: none;
Seems that an extra computation is needed — similar drawbacks as CSS resets (at least philosophically).
Option 2: Setting Specific Rules
border-top: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
Might be more correct (in terms of CSS "semantics")
But if you want to change the border specifics, then it'll require
multiple changes (harder to manage).
Actually it totally depends on you, what is more convenient to you, it also depends on some state like if I want the color of all borders to be same I'll go for 1st but If I think I need to change the colors of each side of the border in near future I'll go with the second 1, but for now, I'll stick to first option
Reasons:
Less CSS to be stated
Specifically it shows that I want border-bottom as none
As you said I don't need to change each and every property: value if I need any changes
If you say proper semantics, proper semantics define very specifically like
border-color: /*Whatever*/;
border-width: /*Whatever*/;
border-style: /*Whatever*/;
Now am sure you don't want to be this specific
If you only want to specify the values once, you can specify the color and width for all, then the style specifically for the sides:
border-color: red;
border-width: 1px;
border-style: solid solid none solid;
Needing help for some homework. I hope someone can help me out as I have tried all combinations with not much success. I've been asked to simplify the following:
border-top: 1px solid #8B8BA2;
border-left: 1px solid #8B8BA2;
border-bottom: 1px solid #8B8BA2;
Anyone have any great ideas. I did try the following but it didn't seem to work:
border: 1px solid none solid solid #8B8BA2;
Hope someone out there can help.
Mari
Specifying the border attribute let's you specify all borders at once. Since three out of four are the same, specify the border for all sides, and then remove the border for the one it doesn't apply to:
border: 1px solid #8B8BA2;
border-right: 0;
As an addition to SeanA's answer (+1), - if this is for homework you might be being asked if you actually know the shorthand border order.. so while the above works too, this might be the answer they're after.
border: 1px solid #8B8BA2;
border-width: 1px 0 1px 1px;
the first declares all borders, the second zero's the "right" border, using the four sided notation.. border (and margins and padding) are written Top - Right - Bottom - Left - TRBL and the word used to remember this is "TRouBLe" or you can just think clockwise :)