How can it be that table element style width shows one number but its actual width is different? Element style says 175px but actually it is 167px
It turned out that if table width is limited then width does not honor the element style and can be smaller.
Related
I am new to responsive web design and was looking at an answer.
It doesn't really explain much but provides a solution.
If an img is set as width: 100% I understand that it will occupy 100% of the browser window or its containing element.
The max-width property states that it is used to set the max width of an element.
If I set an img tag to max-width: 100% to what element/context is the percent calculated against?
All I see is when max-width is used the image scales down but never up.
Max-width example: http://jsfiddle.net/ErNeT/1445/
Width example:http://jsfiddle.net/ErNeT/1446/
If I set an img tag to max-width: 100% to what element/context is the
percent calculated against?
By default an img tag has no dimension set on it. So whatever happens, that image will never resize. However, applying max-width will make it behave like it has 100% width. It will resize based on the parent container BUT will stop at the maximum width the image has. For example: if the image was sliced to have 100px width, it will resize up to 100px width.
On the other hand, by applying width (and no max-width property) it will disregard all other width properties of the image and the parent container.
If you set max-width to img then it will be the max-width of its parent. If you don't specify a width for the img then it will not exceed it's native size.
When you set percentage values, both width and max-width are relative to the containing block. However, if the width of the containing block depends on the width of the element, the resulting layout is undefined.
From the specification,
https://www.w3.org/TR/CSS2/visudet.html#the-width-property
Specifies a percentage width. The percentage is
calculated with respect to the width of the generated box's containing
block. If the containing block's width depends on this element's
width, then the resulting layout is undefined in CSS 2.1. Note: For
absolutely positioned elements whose containing block is based on a
block container element, the percentage is calculated with respect to
the width of the padding box of that element. This is a change from
CSS1, where the percentage width was always calculated with respect to
the content box of the parent element.
https://www.w3.org/TR/CSS2/visudet.html#min-max-widths
Specifies a percentage for determining the used value.
The percentage is calculated with respect to the width of the
generated box's containing block. If the containing block's width is
negative, the used value is zero. If the containing block's width
depends on this element's width, then the resulting layout is
undefined in CSS 2.1.
From my point of view
if width > max-width use max-width
Example: Let's say you have 1 div box or Image which is you set the size of the box width > 1000px and max-width 500px. It still follow the max-width.
Example 2 - Using percentage : Let's say that div of your width set 500px, and max-width :100%; what is the result you will get ? The box div will turn 500px that is your starting point. Try shrink it. What is the result you will get next? It's turn responsive.
DEMO
this is what i understand about the difference between width and max-width.
Based on your question and fiddle, I think this is the answer what you're looking for.
Max-width example: DEMO2
- When you start use max-width and set 100%. let say your images size is width is 300px. Meaning that your images starting point are 300px. You aren't override the original image width.
Width example: DEMO3
- When you start use width and set 100%. Meaning that your image are override the original image width.
Here's the table cell: https://developers.google.com/+/web/share/#sharelink-sizes
As you see when you use the inspect element feature in Chrome or Firefox, the total width and height of the table cell is calculated as 105px × 85px. However, the cell content (image) is only 64px × 64px and the cell padding is 6px 10px 6px 10px. I don't see any width and height properties in the element style, so where does this extra width and height come from?
It's a table cell, so the browser will automatically distribute space among the cells to fill the width of the table. The exact width will depend upon the contents of all the cells and the width of the table. In this case, the table is set as a percentage width of the browser window, so on my 1920x1080 monitor, it's actually quite a bit bigger than in your screenshot.
Original question: Does HTML <table> have a default width?
Recently someone asked a question somewhere along these lines, and got me wondering.
Take this for example.
http://jsfiddle.net/rqmNY/1/
In this fiddle, if you were to check its width (I'm using inspect element from chrome), it shows 100px, working as intended.
Lets add a few more "td"s in, and we shall see that the "td:100px" css is being ignored.
http://jsfiddle.net/rqmNY/2/
As you can see, now it's 83px instead of 100px as originally intended.
But let's say, I move back to fewer TD's (7), and I add in a wider width to each TD element (500px), the result is that the width of the td gets stuck at 119px.
http://jsfiddle.net/rqmNY/6/
And finally, let's say I have a table of 2000px width, and td of 100px width, and many td elements.
http://jsfiddle.net/rqmNY/7/
Now the table width overrides the TD width, and expands the td's width to 222px.
Can anyone explain this behavior?
p.s. Note that in all cases, inspect element tool tells me that the width is always corresponding to the css, it's just the final result not showing correctly.
Have you tried adding display:inline-block to your TD CSS? That forces the browser to not ignore your TD width.
I highly believe the answer to this question is such:
The priority of widths that will affect the TD is
Table Width
Parent Element Width (and if none, Viewport)
Element(TD) Width.
Hence if the table width is set, the TD's will ALWAYS adjust to the width of the table. However, if the width is unset, the "main" width will be the true width of the viewport. Unless the CSS code states otherwise, this holds true. And only when the total width of the TD's is smaller than that of the viewport, the elemental width will be taken into account.
Edit
Table width will always override TD width.
Stated TD width will only be followed until it exceeds viewport width, and viewport width will be taken as priority.
Actually the table width depends on the cell width when you do not specify the table width. But when you specify the table width it will ignore the td width. Look at the following example:
<table>
<tr>
<td>Column 1</td>
</tr>
<tr>
<td>Column 2</td>
</tr>
</table>
If you use
td {
width:500px;
}
then the table width will be 1000px.
But if you use
table {
width:500px;
}
td {
width:500px;
}
it will ignore the <td> width and the table width will be 500px.
According to the w3 Docs Here It says "In the absence of any width specification, table width is determined by the user agent."
What I can think of it is td width is always dependent on the table width. If you specify it or not. If you have a table with width 500px and 2 TDs with width 200px each. Now after adding these 2 TDs in table there are 100px remaining to accommodate so 50px each are added to both the TDs overwriting the original width property. See this link http://jsfiddle.net/rqmNY/7/
I have set table-layout: fixed, width and padding for column but real width is higher per 22px than it should be. What can cause this?
You have set the table width to 1000px and cell widths in pixels, too, so that they do not add up to 1000px. Obviously, a browser has to make the cells wider or to ignore the setting on the table as a whole. It is better that you as an author make such a choice, e.g. by simply removing the width setting on the table.
We can set the padding and margin properties of an element E using either pixels or percentages.
A) I assume that when we use percentages, the percentage value refers to the width of the containing block? Thus, if E is declared directly inside <body> element, then the containing block is <body> and percentage value refers to width of <body>element.
B) What is the default width of a <body>element?
Thanks.
EDIT:
If I set E’s padding to 50%:
#E
{
padding: 50%;
}
then the width of E's "padding-left + padding-right" will equal the width of a viewport (when viewport is expanded over the entire screen).
A) Thus, I assume the width (specified in pixels) of <body> depends on a horizontal resolution of a monitor and the width of a viewport? My screen resolution is set to 1024*768, and thus in my case the width of a <body> is 1024px (assuming viewport is expanded over the entire screen) ? But if I was to change the resolution to 800*600, then the width of a <body> would be 800px?
Yes, the CSS will be applied to the element containing it.
The default width in percentages for the <body> tag is 100%.
In general, you should be using a CSS file linked to your HTML, and use CSS Selectors to chose what elements to style. It is bad practice to embed CSS into your HTML, as this is not very maintainable (i.e. if you need to change the style across a website).
Edit:
#E { padding: 50%; }
is a shortcut to:
#E { padding-top: 50%; padding-right: 50%; padding-left: 50%; padding-bottom: 50%;}
In regards to what the % stand for, it's viewport width, i.e. the number of pixels in the inner browser window, showing the HTML, nothing to do with your screen resolution.
If you were to change your window resolution to 800px*600px your viewport width would be somewhat less than 800px, as the scrollbar takes up some of that.
The default width of body is 100%, but html is the parent container of body, so it will affect body in some circumstances if you're not aware of it.
“My screen resolution is set to 1024*768, and thus in my case the width of a <body> is 1024px?”
As Tor mentioned, the <html> element can have margin, borders and padding of its own.
In addition, the browser window’s scrollbars can take up some space too.
A) I assume that when we use percentages, the percentage value refers to the width of the containing block?
It varies depending on the property the percentage is assigned to. For font-size, for example, it is the computed font-size of the parent element.
Padding is calculated based on the computed width of the parent block — even padding-top uses the width. (Remember, the width is the content width and excludes padding, borders and margins).
B) What is the default width of a element?
The default width of the body element is auto which is "Whatever space is left once margin, padding and borders have been taken into account". Since browsers have non-zero padding and/or margin there by default (which of the two depends on the browser), this is not 100%.