I have simple tables like this:
<table border="1">
<tr>
<td>title1</td>
<td>title2</td>
<td>title3</td>
</tr>
<tr>
<td>item1_1</td>
<td>item1_1</td>
<td>item1_1</td>
</tr>
<tr>
<td>item1_1</td>
<td>item1_1</td>
<td>item1_1</td>
</tr>
<tr>
<td>item1_1</td>
<td>item1_1</td>
<td>item1_1</td>
</tr>
</table>
Combined with my CSS, the result would be:
http://jsfiddle.net/yzsfH/
As you can see, the hyperlinks inside the table "move" when hovering over it.
Of course that movement is an unwanted effect, and I would like to get rid of it.
I did some search on it, but could not find anything satisfying.
Could someone explain, why this is happening and how to fix it?
Instead of using the bold attribute to highlight an element, the proper approach is to give the currently hovered link a different color - that way, you won't have these kinds of problems!
Simply remove the bold attribute and change the color to something different, like so:
a:hover
{
text-decoration:none;
color:#000000;
}
Remember that making something bold makes it's size larger to render, and that this is the generally preferred approach.
Here's a working jsFiddle - http://jsfiddle.net/yzsfH/5/
This you may know, that the width is increasing because the text size is increasing. (Bold Text)
So, give the below properties to a tag which will solve the problem.
a{
display:block;
width:55px; /* give fixed width here */
}
Giving fixed width to td is waste because if the content inside it increases then td width also increases eventhough fixed width is assigned to it.
Working Fiddle
This is happening because a bold font is wider than a normal font. Try centring your text and making the cell slightly wider.
bolder text = larger text ... it's not a bug, it's an obvious feature
try forcing the width of your td's (using CSS of course) so that their width doesn't depend on the width of the text in it...
When text becomes bold, it increases in width. Because the cells wrap around the text, and the text is now wider the cell becomes wider to accommodate this. A fix would be to use a lighter font and on hover have it become darker.
To fix this issue Give the fix
width:50px;
Related
I'm using ajaxcrud.com and there's a function that allow me to format my field. It do so by including a <span> just before my text. Something like:
<table>
<td><span>Text here</span></td>
</table>
My problem is that my cells width are all the same. So if I have a lot of text in a cell, it only make a cell with a huge height.
Is there anyway I can use this <span> to expand my cell width?
Set the display of the <span> element to either block or inline-block. Then you can set a width rule for the span that the table cell will respect. You can set this to a specific pixel width, a percentage, etc.
Here's a solution suggested by Explosion Pills:
<table>
<td><span style='display:block; width:400px;'>Text here</span></td>
</table>
Of course, you can adjust the width to your needs.
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.
I need to make some changes on a legacy web-based cms (which has table-based layout). I can only make changes to the content area of the website, which is inside several complex nested tables, but I suppose we can assume it is just 1 table here.
Given the (simplified) code below, is it possible to display ABC on the far right in IE6 and IE7?
<table>
<tr>
<td style="width:200px; border:solid 1px black;">
<!-- can only make changes inside here -->
<div style="border:solid 1px red; text-align:right;">ABC</div>
<input style="width:300px;" value="DEF">
</td>
</tr>
</table>
The <input> tag represents some content that may be longer than the preset width of the table cell. In IE8 or other modern browsers, the div can expand to match the input. But in IE6 and IE7, i cant seem to get it to expand beyond 200px using just css. I've tried using float, width, position relative, etc. Once again, I cannot remove the 200px width declaration or make any other changes to the table structure.
Anyone know how to do this? Thank you.
If you can change the structure inside the cell, you can wrap everything in a div that have float:left (or right, or is inline-block), so it would expand to the contents like this: http://jsfiddle.net/kizu/AkVqS/
If you can't wrap the input part, you can use the expression that run just one time (so it wouldn't cause any performance problems): http://jsfiddle.net/AkVqS/2/
such problem with firefox.
<td height="10" style="border:1px solid #990000;"> </td>
gives red line border, but I need height 10, with it doens't stand height 10, without it firefox doesn't show the red line.
anyone one a way?
Make sure your table does not have the CSS empty-cells:hide; applied to it. You can apply the direct opposite value inline (opposite is show), but this is the default value so unless you're setting it to hide in some page-level CSS, this should not even be necessary.
Another CSS item that can affect empty table cells is border-collapse. Ensure that you are not setting it to collapse. The default is separate, again you can either ensure that no page-level CSS changes this style, or you can explicitly add it to the table inline.
<table style="empty-cells:show; border-collapse:separate;">
<tbody>
<tr>
<td style="height:10px; border:1px solid #990000;"></td>
</tr>
</tbody>
</table>
http://jsfiddle.net/yHrhu/
In fact, using the non-breaking space ( ) may cause the cell to be larger than the specified 10px, since the space will be of the same font size as any text in the element. If you are using any font size that is larger than 10px, the cell would be bigger than intended.
additional to Chris's answer.
Make sure your TD's does not have position:relative applied.
Just stumble around this problem myself today turnout set the background into none or transparent make the border visible again.
table.table tr{
background: transparent;
}
I have a table with fixed layout. On overflow, the contents of cells should clip from the left instead of the right. That is, if the width of the TD is less than the width of the text, the cell below should display "67890" instead of "12345".
This needs to work in IE7+ at minimum. Is there a way to do this in css without any JavaScript?
<table style="table-layout:fixed">
<tr>
<TD>
12334567890
</TD>
</tr>
</table>
you could use:
direction:rtl;
I haven´t tried it, but you could try text-align:right or wrap the contents in a div and float that right.
You can use the CSS3 property word-wrap: break-word but there's no way to control where it will break the word. It will fit whatever it can on the line and then break it down to the next, it won't keep the lines of equal length.
There is also the <wbr> tag but I've never used or experimented with it, so I can't really tell you how to use it.