If you set a detail width, <td width="10"...>, what happens to the detail if you put something wider, such as a picture that is 20 pixels wide, in that detail?
td elements will expand to match their contents by default.
If you use css, you can set max-width and oveflow:hidden and the element will not expand.
td{
max-width:20px;
overflow:hidden;
}
https://jsfiddle.net/613kpweh/2/
Related
I'm trying to create a table e.g. 8 number of columns. It works fine on the desktop screen. However, when trying on a smaller screen or trying to reduce the size of the browser, tds get divided equally and content gets squeezed.
I want to have the min-width of the td to be say 200px. How can we achieve this?
I tried
table-layout: fixed
td { min-width:200px;
}
Apparently, min-width on td does not work.
I also tried putting <td><div style:"min-width:200px"></div></td>
However, this does not work. td's border and the content in the divgets out of placed when doing so.
Is there any idea?
I can use bootstrap 3 as well if that solves the issue.
Thanks.
table-layout: fixed , this attribute (fixed) affects min-width. When I set it to automatic or inherit, and add the style min-width:200px, the td's width will not change when the width of browser's window is shrinked.
I'm new to CSS and gave up trying to make my table working - would like to ask for some help.
What I need to do is to display a table occupying 100% of screen width (single row, for example), containing 24 columns (cells). Each cell contains a value of random length. Because of each value is too wide, cell is being extended to display the value (fit the length), and total width of the table exceeds 100% of screen width. I need each cell to occupy 1/24 of screen width and hide characters which does not fit cell width. Of course this should work for resizing this table.
Any ideas how to implement this? I tried playing with
overflow: hidden
but it didn't help much.
Thanks in advance!
Fixed layout
table{
width:100%;
table-layout:fixed;
}
and to hide the data which overflows
td{
overflow:hidden;
}
if you want all table cells same width, apply following property to table
{table-layout: fixed;}
This property is support by almost all browsers. so, you shouldn't worry about it.
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.
I'm trying to style a table according to the following requirements and getting nowhere:
the width of some columns must shrink to fit contents.
the width on other columns must divide up remaining available width among themselves.
table width must fill, but not exceed, parent width.
I came up with one approach ... set the shrinking columns width to 1px. That seemed to do the trick until the content of the expanding columns grows and ends up increasing the width of the table to exceed the width of it's parent, which violates the last requirement listed.
Any ideas? I'm broke.
I'm using Compass/Sass hyphenation, which helps with the last requirement (table does not exceed parent width). Works in Chrome perfectly. In Firefox, the table width is just a little too far. This is what my styles look like:
td.id
td.actions {
text-align: right;
/* trick table cells into fitting their content with nowrap and zero width */
white-space: nowrap;
width: 1px;
}
td {
#include hyphenation;
}
Sounds like you are using pixel widths instead of percentages. If you are, try "60%" or another appropriate value. Can you post your code?
td.actions {
table-layout:auto;
}