This question already has answers here:
The border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?
(27 answers)
Closed 9 years ago.
This works
div {
-moz-border-radius: 5px 5px 0 0;
border:1px solid #000;
margin:30px;
}
This does not work
table {
-moz-border-radius: 5px 5px 0 0;
border:1px solid #000;
margin:30px;
}
Does anyone know how to use -moz and -webkit to work on tables?
5.6. Effect on Tables
The ‘border-radius’ properties do
apply to ‘table’ and ‘inline-table’
elements. When ‘border-collapse’ is
‘collapse’, the UA may apply the
border-radius properties to ‘table’
and ‘inline-table’ elements, but is
not required to. In this case not only
must the border radii of adjacent
corners not intersect, but the
horizontal and vertical radii of a
single corner may not extend past the
boundaries of the cell at that corner
(i.e. the cell's other corners must
not be affected by this corner's
border-radius). If the computed values
of the border radii would cause this
effect, then the used values of all
the border radii of the table must be
reduced by the same factor so that the
radii neither intersect nor extend
past the boundaries of their
respective corner cells.
The effect of border-radius on
internal table elements is undefined
in CSS3 Backgrounds and Borders, but
may be defined in a future
specification. CSS3 UAs should ignore
border-radius properties applied to
internal table elements when
‘border-collapse’ is ‘collapse’.
Related
This image shows a table having edges drawn with slashes
Drawing borders with common styles like dotted , dashed wouldn't be a problem but i'm not quite
familiar with this type of border.
The border-image property would be one way to achive an effect like this. You would prepare an image (a PNG, SVG, or some other format) with just the borders, like so:
/--\
| |
| |
\--/
...and then set the border-image to that image. The slicing properties makes it so that the corners are "cut" out of the image; the straight line segments can be either stretched or repeated. Some examples on the linked page have all corners be the same shape, but this is not required.
Putting all that together, the result looks like this:
table {
border-width: 8px;
border-style: solid;
border-image: url('https://i.stack.imgur.com/hDIIB.png') 8 repeat;
}
<table><tr><td>table content</td></tr></table>
I am trying to create an interface where two labels share a space, similar to an html table with two columns would: there is a distance between the two and when the window is resized they both resize and stay the same size, keeping the distance between them and filling up the available space.
e.g. | 10px to edge | label1 (50%) | 5px spacing | label2 (50%) | 10px to edge |
If the window is resized the margins and the spacing should stay the same while the two labels should evenly distribute the available space between themselves.
After multiple attempts (e.g. putting them in a custom view takes care of the margins) I cannot figure out the correct layout constraints to make this happen.
I had the same problem until I read your problem. Because I read your problem, I gave myself another try:
You can resolve it by going into the storyboard. Then, you select both labels. After that, you add the following constraints:
Now the labels resize correctly. The trick here is to edit the constraints of both labels together. Otherwise the Equal Widths choice isn't available.
I have a label which has border around, it was set by this function:
this->setStyleSheet("border: 1px solid black");
but when I wanned to change position of the label I had to also give width and height of the border but where do I get it from?
In fact the parameters might be obtained via this->style(); that returns a pointer to QStyleSheetStyle... then via renderRule() one could get QRenderRule that stores all the structures required. The only problem is that those methods are private and intended for internal use.
So the simplest way is to use RegExp:
QRegExp regexp(".*border: *(\\d+)px.*");
if (regexp.indexIn(btn->styleSheet()) >= 0)
qDebug() << regexp.cap(1);
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
What is advantage of using LESS variables for changing properties like;
#Margin-10: 10px;
#Margin-12: 12px;
#Margin-19: 19px;
#Margin-110: 110px;
#Margin-189: 189px;
#Margin-115: 115px;
#Margin-150: 150px;
.................and so on.
And creating those variables which will not be alter in future.
#PullLeft: left;
#PullRight: right;
I am re-factoring the LESS in my application which has too many CSS properties which are using variables for above scenarios. Is there any advantage of using variables in this case?
I think we may have a hammer in the house with those variables. Having them named so specifically is problematic both because it doesn't really work with semantic concepts of layouts AND because if you were to change some of them, total chaos would soon ensue. Just imagine:
#margin-189: 27px;
#margin-115: 46px;
I had trouble typing that even as an example. I feel something like the shower scene from The Crying Game.
No, these variables are an example of when your only tool is a hammer, all you see are nails.
More correct might be something more semantically flavored, like:
#container-margin-left: 36px;
#panel-margin-left: 20px;
Those at least speak to how your site will be styled AND if the values were to change, it would not result in an immediate maintenance trainwreck.
Its highly discouraged to use the name of variable same as value. The purpose of using variables is that if there is a change required then modification is minimal. e.g you have declared a variable #Container-width: 100px and you are using it in 10 files. So if you want to change its value to 200px then you would simple have to change value nothing more.
There are two disadvantages of using variables names as you suggest:
If you want to change the variable #Margin-10 value to say 15 e.g #Margin-10: 15 it would look odd.
If you are declaring variables for each value then there is no benefit of declaring it as variable because you have to modify it on several places (which is not fulfilling the purpose of variables)
Now coming to the variable name #PullRight or #PullLeft. Again there is no benefit of using such names, as the values (left, right, top , bottom) are limited not variable. So I would suggest that you don't create variables but use values as it is.
Create variable names on the basis of their functionality. Use noun and verbs.
It's the same as using variables in any language. You can simply change them whenever you want.
Now you can think - they will never change, but in future you may want to make some changes. You may even move some CSS to another project where you decide to make some changes. Using variables you will do it it a minute.
Another example. Let's assume you have the following code in CSS:
#page {
width: 800px;
}
#content {
width: 600px;
}
#sidebar {
width: 200px;
}
now you decide to change #page width to 780px
SO you change it:
#page {
width: 780px;
}
#content {
width: 600px;
}
#sidebar {
width: 200px;
}
and now you have a problem - you need to look in the whole file what's wrong (in real file it won't be so easy as in example above).
Using variables you could have:
#page-width: 800px
#content-width: 600px;
#sidebar-width: #page-width - #content-width;
so without a problem you can change the value or make small modification in those 3 lines.
However in the example from question I think it hasn't been done as it should. If you define:
#Margin-10: 10px;
#Margin-12: 12px;
#Margin-19: 19px;
you expect that Margin-10 is 10 unit margin but you can decide to change the value for let's say 11 and you can have:
#Margin-10: 11px;
#Margin-12: 15px;
#Margin-19: 24px;
It will make you completely mess, because in fact even if you look at this file, you now don't know what is Margin-10 variable and what's its purpose. It has even other value than its name suggests so you don't really know what to expect and you again need to look at whole CSS source.
So variables are useful but they should have names that you can easily remember and know what's their purpose. You should never connect variable name with variable value because value can change and you will get useless name.
However it's also possible in above example that someone defined those margins even not to change their values but to change their units, for example for using em:
#Margin-10: 10em;
#Margin-12: 12em;
#Margin-19: 19em;
However I still think it's not the best solution because it's limiting re-usage this file
In XAML, you can define a size property (such a length or width) in "*" units, in which * represents a part of the remaining space.
So, if I have a parent element that is 1000px wide, and it has 2 children, which are both defined as being 1* wide, they will be 500px each. If one is defined as 3*, and the other as 1*, then one will be 750px, the other 250px.
If there is a third element, and the widths of the 3 are defined as "100px", "" "2" respectively, then the widths of the 3 will be 100px, 300px, 600px.
Is there a CSS equivalent of this, or should I just simulate it using calc()?
Flexible box layout model does that with an OK support matrix (no IE)
It does exactly what you're after, e.g. for your scenario 3:
<div class="box">
<div>un</div><div>deux</div><div>trois</div>
</div>
.box {
width: 1000px;
display: box;
box-orient: horizontal;
}
.box > div:nth-child(1){ width:100px; }
.box > div:nth-child(2){ box-flex: 1; }
.box > div:nth-child(3){ box-flex: 2; }
Fiddle'd from html5rocks example
Although ratios aren't supported in CSS, percentages are. This means you can't really specify "the rest of the width", but you can normally get what you want.
For example, your first example of 1000px with 1* could be achieved by assigning `width: 50%'. Your second example would be 75% and 25%.
Your third example is a bit more complicated, mixing fixed px values and percentage values won't work. What you can do is use some clever margins to get the overall result.
I have created a JS Fiddle to illustrate the third example.