eg: my table height and width is 10:10. When i entered some paragraph inside table, unexpectedly the width(50) is increasing. Please give me solution for avoid that things.
In my case, if i'm aware of how text inside a in a table are rendered, i put them inside a . You got, together with CSS, complete control of the text.
<table style="background-color:#ccc;">
<tr>
<td><div style="width:20px;height:20px;">'randomtext</div></td>
</tr>
</table>
Above snippet gives you a static box whatever you put into the div-tag. If you intend to hide the characters that not fit in the size, just add overflow:hidden.
<div style="width:20px;height:20px;overflow:hidden;">'randomtext</div>
You may also use the table-layout:fixed; CSS attribute to the <table style=''> tag to achieve same effect. overflow:hidden give you same effect with table-layt, as in a DIV. I will point out avoiding the use of tables in design purposes (DIV's are the element for this). However I also will beg-pardon if I don't understand the question correctly. Your question could, at this time, be much more clear.
A side note,
If we say the example with a square height of 10 x 10 pixels. When you type in a ' or something, the table are grow. Probably in height but maybe also in width depend on font-style. The <div> can override this. Even if the character are visibly smaller, like as a quote mark, there are space reserved for a box around a full size of that chosen size, font-face and encoding.
Related
I want to create a table with 3 columns: On the left and right fixed-width columns (which are obscured by position:fixed - divs) and in the middle a variable width column.
This does NOT work:
<table>
<tr>
<td width=202px></td>
<td> [MYCONTENT] </td>
<td width=200px></td>
</tr>
</table>
The problem is, that for some reason the browsers (tested on Chrome and Firefox) think that I don't really mean it when the browser-window is not wide enough: The outer columns are cropped and width-setting ignored, therefore the real content is sliding under my divs and become completely inaccessible.
The only idea I have left is to use a 1990's-era transparent pixel resized to 200px width, but I shudder at the thought. There must surely be a better way?
(BTW, yes I have tried various pure-css layouts, and none was suitable, for example if you use overflow:auto for the middle column, the scrollbar at the bottom also scrolls(!!) that means if the page is both higher and wider than the window, you have to first scroll down to see the scrollbar, then scroll horizontally, then maybe scroll up again to see what you wanted to see in the first place. I also tried to use padding: to force the needed margins on the left and right, but this also was ignored when the browser-window was not wide enough.)
ok - here it is with tables.
http://jsfiddle.net/sheriffderek/wAGKp/2/
i guess the short answer would be - take the styles out of the html and use a selector. (class in this case" and then min-width --- and width... also - keep in mind that padding and margins will change the width of your stuff... so you could use the border-box method... (it's rad) and included in the second... makes it so that padding stays in the original div size --- hope this helps.
and here it is the way i would do it. (without tables...)
http://jsfiddle.net/sheriffderek/GBtdy/1/
Tables are for tabular data, if you want to layout content you should be using CSS.
I recommend using something like Twitter Boostrap if you struggling with the CSS.
If you really just want a specific solution have a look at the results for terms like "css 3 column layout fluid center - I am not fobbing you off with that, there really are great answers there that are exactly what you want, and lots of search results will take you to those pages (especially to the manisheriar.com and A List Apart articles).
You can use min-width (on the middle div) and max-width - as well as media queries - to help control what happens in smaller windows.
I am trying to get the image caption which is a dd-element to break so it is as wide as it's dt-element. I don't want to use a width and using display: inline and float: left do not work. I have code and example here: http://jsfiddle.net/PnyHs/11/. I'm using Firefox 9 to test.
The only solution I can come up with right now is to use javascript to measure the dt-element and set that width to the dd-element.
Thanks in advance for any help and suggestions.
If you want to keep the structure of your HTML and not use max-width, I dare to say this is impossible, and here is why:
You are expecting the img object to constrain the dd element. However both elements are siblings and can only be constrained in terms of width by their parent (alternatively an element can be stretched out by its children). Hence, the dd will expand as much as it wants because the parent element is not limiting it.
Of course this could be solved by setting the width of the parent element, however you've mentioned that you don't want to do that since the pictures will have different sizes.
So unfortunately unless you change your HTML structure this won't be possible without JavaScript (unless I'm missing something obvious here).
Using dl markup for an image and a caption is artificial and doesn’t make styling any easier. The only approach to the problem (making the caption as wide as the image) that does not need scripting or setting image width explicitly seems to be to use a single-cell table with a caption element, see fiddle and my page on image captions. Example:
<table class="photo">
<caption align="bottom">Image Caption with a very very very very very long
text</caption>
<tr><td>
<img title="" alt="" src="http://dummyimage.com/120x100/82d91f/fff">
</td></tr>
</table>
Can you add a width to your dl element? The same width as your image like this http://jsfiddle.net/PnyHs/12/
I am trying to make a table in HTML. When I resize the window down to be narrow and the window tries to squash everything to fit inside the window even though it's narrow, it puts the contents of a cell on different lines. I don't want this to happen. E.g.:
home about contact us
when you narrow down the browser window:
home about contact
us
This is really annoying. I have tried putting instead of a space where the space is, but it didn't help. Does anyone know the solution?
Try adding CSS attribute of white-space to the <td> elements of the table. In particular, <td style='white-space: no-wrap;'>
You can use for this. That way the browser sees it as one word.
td { white-space:nowrap; }
What do you expect?
Say the window becomes smaller so that the cell also becomes smaller than to fit contact us completely, then do you expect The "extra" content to be hidden? The size of the cell never become smaller than a fixed-minimum?
You need to use width ad height along with overflow (overflow). overflow:hidden will hide the content that is more than the width (provided a height is given)
How can you enforce the minimum width for a TD that can optionally contain an image? I ask this because I'm using a Javascript chess widget but when there are no pieces in any of the squares of a particular column, regardless of the width style of the td's being set to 36px, this column renders much narrower than those that have at least one row that contains the image of a chess piece.
Note that all the style is being set directly on each td cell. I read somewhere that a possible solution would be to instead create a div inside the td and set the width on that. Am hoping to avoid that as it might require significant modification to the underlying Javascript library. I've tried specifying !important along with the width but it had no effect.
Using firebug I can modify the width attribute but it seems the numbers are incorrect. For instance I can decrease the width all the way to 0 and it still appears the same. Or I can set the width to more than 36 and it appears to grow by width-36, but if for instance I set both the height and width of one of these narrow cells to the same number, lets say 60px, the height of what gets displayed is greater than the width and it appears as a rectangle not a square.
Furthermore not only can the td optionally contain an image, but each square specifies a background image too. So I am at a loss :( Thanks in advance
When I alter the CSS in your file using Firebug or the JS inspector in Chrome, setting the min-width property instead of the width property does the trick. Might want to try that? Not sure how IE will like that, though.
BTW: Why not use classes to do the CSS? It's kinda horrible to debug, this way.
By default tables will auto-size their columns.
If you set the table style to include:
table-layout: fixed;
then you'll have much better control of it via css and attributes.
You can use the td tags width attribute or you could use css and set the width.
If the name is like "david" it comes within the allotted space....
but if the name is like "john pal abraham desouza" the allotted space increases automatically..
So i need to have the name occupied in the allotted space by auto resizing the font..
Suggest me a solution..
You can use jQuery to check the length of the string and guess at a suitable font-size, check the rendered width and then adjust again if necessary.
As #Kieran says above, it's not going to be fool-proof - if a name is very long the font-size will be really small. Also, if there are no spaces in a long name, then the text won't wrap over two lines. However, that's a bit of an edge case.
Use a hidden dummy div to do the checking
By using a hidden (using visibility: hidden) and absolutely positioned div with same font CSS settings and copied content, you can easily change font sizes and check div width. When it exceeds certain size you can use the last valid value on your original div. This will avoid visual change of your fonts and content repositioning and recalculation so it will work faster. This will also avoid problems with long non-spaced words.
The same question has already been asked and answered.