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;
}
Related
This code (jsfiddle):
<table style="border:1px solid black;width:auto;">
<tr>
<td style="width:100%;">hello.</td>
<td style="width:100%;">World</td>
</tr>
</table>
produces a table expanded to the width of the window, with the first td expanding to fill. The second td remains at its minimum size.
According to the CSS specification, a percentage on the width property refers to the width of the containing block.
In this situation I'd intuitively expect the excess width to be shared by the two cells. However, I haven't found anything in the Tables section of the specification that describes the definitive behavior in such a case.
Question: What is the definitive behavior here according to CSS specifications?
Note: I'm not looking for "fixed" versions of this code. I just want to understand the behavior of this code as it is based on the official CSS specification.
As I guess, when the table has width:auto or even width:100% how is it possible that two td having width:100% in same table.? which means 100%+100% = 200%. Simply second td has no width as first td already took the available width trying to get 100% and remaining space goes to second td.
We may set the table-layout to fixed. See the snippet.
table{table-layout:fixed}
td {border:1px solid #ddd;}
<table style="border:1px solid black;width:100%;">
<tr>
<td style="width:100%;">hello.</td>
<td style="width:100%;">World</td>
</tr>
</table>
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;
Fiddle
<table>
<tr style="border:1px solid black"><td>hi</td></tr>
</table>
In FF7 I can see the border. In IE7 I see no border. How can I display the border for the row? I would like to avoid having to add borders at the td level due to the complexity this adds determining column index for border placement.
It appears that IE7 is super buggy (as apposed to IE6 which is uber-super buggy).
Here is a fiddle that demonstrates a possible workaround (top and bottom borders on the TD elements).
Its not possible to go directly to TR. Unfortunetly, even though you specified in the question that you would like to avoid td, the workaround is to use a td.
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/
Please consider the following:
<td style="width: 500px;">
<div style="width: 400px;">SomeContent</div>
</td>
For some reason, the column that contains a div will not expand to 500px as the style suggests.
Do you know how to get the td to honor the width that I am specifying in the style?
In theory, you can use the min-width and max-width styles. In practice, some popular browsers ignore these styles. In this case you have explicitly declared a width of 400, so it should always equal 400 unless acted upon by a child growing or a parent shrinking. You could runat-"server" and programatically determine the width attribute based on content size, or you could play with the overflow style, or put it in a Panel with a horizontal scrollbar.
is there a width on the table and other tds within the table? Also, have you got a doc type going on?
However, that said, here's your solution:
<td style="width: 500px">
<div style="padding: 0 50px">SomeContent</div>
</td>
Setting your padding appropriately.
Having reread your question, I feel that this might not be the answer you're looking for. Could you elaborate a little more?
try this:
<td style="width:500px;">
<div style="width:100%;">SomeContent</div>
</td>
if however you want the td to be the exact size of the div, to a MAX of 500px, then try:
<td style="max-width:500px;">
<div style="width:100%;">SomeContent</div>
</td>
Keeping in mind that IE6 doesn't understand max-width, and will just force it to be 500px.
You have no reason to set a fixed width on the DIV within the TD, by default DIV's are block elements which means they will fill the full width of there containing element.
Either set padding on the TD or margin on the DIV to achieve the same style.
Without seeing futher markup or css i can't see any reason why the TD would not be 500px, if you added two different background colors to the elements you will indeed noticed that the TD will be 100px wider than the div.