|
CSS - Table Td Border - All I Want Is The Border=1 Effect
Hi,
This used to be my solution: Code: <table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'> But this only works well on IE - not Mozilla Now I want to use CSS: Code:
.results {
border: 1px solid #CCCCCC ;
}
Code: <table class='results'> --------------- The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't. If I specify Code: <td class='results'> for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping). Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration? Thanks a lot! Similar TutorialsI would like to set up a table with a different border than the cells inside it. Here's my code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
TABLE {border: 1px solid black; border-collapse: collapse; width: 200px}
TD {border: 1px solid #ccc}
</style>
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different? can some one please help me out in creating that red areas... is any method possible using CSS tht cutting border margin effect... or is using a image the only option. even with using image. how can i get the right side one ? the corner part where its cut cross .. Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. I have an HTML table that contains a lot of data, so I want to separate the rows and columns with a grid. Nothing out of the ordinary. Basically make it look like an excel spreadsheet. A grid. The basic HTML border=1 property works, but I want to make the border thinner, just 1px, using CSS. I'm very new to CSS though so I don't know how. I tried style="border: 1px solid" but that just makes a border around the outside of the table. I want every cell to be isolated. Any ideas? Thanks. Hello: I am building a ecommerce site, there are featured product on frontpage, I want to make a square border for each product, I have done top border and bottom border, but I don't know how to make the vertical lines on the right and left to make a nice square border with rounded corner the html structure is as followings table-----for the top border table-----to display product image and price, all that table-----for the bottom border I know by putting in css code for the middle table will be able to close this border could anyone tell me how? I am having two problems with my tables right now: Within the style sheet, I have the following: table { border: thin #0000CC; } If I am not mistaken, this should make all tables that have a border of 1 or greater to automatically be thin and blue. This is not working... Why not? D Hi, I am making a website for my friend that lost her myspace acount becuase of here small uncle. So I want to make a website for her that is simmular to myspace. So my question is: How do I add in text up the top in the border that is 15xp? Thank you. Hi, I am having problem with the following table. It displays red border (#ff0000) around table in Internet explorer. In Firefox red border does not show at all. It is just #ccc. What can I do to have red border displayed in Firefox too? Code:
<table class="maintable">
<tr>
<th scope="col" nowrap>City</th>
<th scope="col">State</th>
<th scope="col">Zipcode</th>
</tr>
<tr><td align="center">London</td>
<td>England</td>
<td>12345</td>
</tr>
<tr><td align="center">Berlin</td>
<td>Germany</td>
<td>6789</td>
</tr>
</table>
.maintable {
line-height: 2.5em;
border: 1px solid #ff0000;
border-collapse: collapse;
}
.maintable th, .maintable td { padding: 0 5px; }
.maintable th {
border: 1px solid #ccc;
}
.maintable td {
border: 1px solid #ccc;
}
Thank you just getting into the css world for real, and im using it for the borders of a table: border:1px solid #000000; except this only does the outside border of the table, and not the borders for the rows/columns do i need to have another .cell in my css to get each one to work? with border: 1px solid #FFFFFF; in css i got border only around the table I want the border to surround every cell of the table as it is with <table border="1" bordercolor="#FFFFFF" > how? Hi All, I am trying to make my table do the attached, where it has a border around the entire table but has a 2px space edge... Like the attched image, any ideas? I have a problem with applying a style for tableborders that is needed at the client I work at. The client works with IE6 / IE7 only. In a portlet (JSF) content is loaded into a table that is automatically generated on the basis of CSS. The "house-style" in this company for using tables is set to the following: - The outer borders for the table are not visible - The border under the top-row is orange (#F60) - The borders under all other rows are grey (#808080) - The vertical borders are all orange (#F60) An example of what I mean is seen here (sketch from MS paint, poor quality and wrong colors!!!) : URL Anyone with suggestions on how to tackle this? I have found one solution that seems to work, but as soon as I change it (size, nr of rows etc) the right border shows again. I do not fully understand the code and there are no comments added. See below: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Table with css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body{text-align:center;}
* {margin:0;padding:0;}
html{font-size: 75%;}
body{background:#ccccff;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;}
.tbla caption,.tbla,.tbla th,.tbla td{
border-color:#0099cc;
border-style:solid;
font-size:1em;
}
.tbla{border-collapse:collapse;}
.tbla th,.tbla td{padding:.5em;}
.tbla caption{background:#9999ff;border-width:1px 1px 0 1px;font-weight:600;padding-top:.7em;padding-bottom:.3em;}
.tbla th{text-align:center;font-weight:600;font-style:italic;}
.tbla{border-width:1px 0 1px 1px;width:100%;}
.tbla td{border-width:1px 1px 0 0;font-style:normal;}
.tbla th{border-width:0px 1px 0 0;color:#000000;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;}
.tbla col{width:33.3%;}
.tbla .a{background:#ffccff;text-align:right;}
.tbla .b{background:#99ccff;text-align:left;}
.tbla .c{background:#ccffff;text-align:center;color:#ff0000;font-family:"Comic Sans MS", sans-serif;}
head+body .tbla tr td {background:#ffccff;text-align:right;}
head+body .tbla tr td + td {background:#99ccff;text-align:left;}
head+body .tbla tr td + td + td {background:#ccffff;text-align:center;color:#ff0000;font-family: "Comic Sans MS", Geneva, sans-serif;}
.x{width:64em;margin:1em auto;}
.tbla th:first-letter {color:#fe7807;}
.tbla th{text-transform:capitalize;}
</style>
</head>
<body>
<div class="x">
<table cellspacing="0" summary="aa" class="tbla">
<caption>table</caption>
<col class="a" /><col class="b" /><col class="c" />
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one x</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>FF needs a Div to center ?</td>
<td>it detaches the </td>
<td>caption ?</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hi I'm sure this is an easy one, but I can't figure out how to create a table style sheet that does exactly what the following html does Code: <table width="100" border="0" cellspacing="0" cellpadding="0" bgcolor="blue"> <tr> <td bgcolor="yellow"></td> </tr> </table> I tried many different variations using the table-specific keys documented here but am unable to achieve the above effect. What's happening is that the yellow background of the "td.outlineCollapsed" style (below) has a 1 pixel inset on all sides from the edges of the "table.outlineBase" style box. With the html, by contrast, the yellow background of the <td> exactly overlaps the blue background of the containing table. The exact overlap is what I'm trying to acheive. Could someone take a look and tell me what I'm doing wrong? Thanks Ken Here's the css: Code:
table.outlineBase {
background-color: #888888;
width: 100%;
height: 20px;
/*
tried all of the following in many
different combinations. Nothing worked.
border-style: hidden;
border-collapse: collapse;
border-spacing: 0px;
border: outset 0px;
border-spacing: 0px;
border: inset 0px;
*/
}
table.outlineBase:hover {
cursor: pointer;
}
td.outlineCollapsed {
background-color: yellow;
width: 25px;
height: 20px;
}
using css i've got a table in a div: e.g. div padding: 20px table width: 540px border: 10px solid red; result: the div including it's own padding should be 600px wide but using the html strict dtd ie is in strict mode (confirmed by other measurements) the whole width of the table is 540px including the borders. also setting box-sizing to contents . thoughts? Hi, I'm trying to make a table that will hold a bunch of thumbnail images - three columns and however many rows are necessary. I would like this table to have a border on of the cells EXCEPT for any border on the outside of the table, so it should look like this: Code:
| |
----------------------
| |
----------------------
| |
Is there some nice little CSS code that will do this for me? I know that I can set the top right box's left and top border to 0, top right box's right and top border to 0 etc but I will be generating the table dynamically so it makes it harder to do the bottom three cells (still possible though, so I'll do it if I have to). Thanks I'm having some issues with getting a table border to appear in both Mozilla and IE. I had it working at one point but now it's stopped working in IE. Basicly this is the code to control it: border:1px solid #0; but IE doesn't read it, I've checked the rest of the CSS to see if there is any conflicts but found none. Anyone know how to get the table border to appear in both IE and Mozilla? Hello, I got a website with a table on it. This is how it looks in firefox 2.0: http://img139.imageshack.us/img139/9822/helpffkr6.jpg And here's how it looks in IE6: http://img111.imageshack.us/img111/9675/helpiehi7.jpg As you can see, where FF do display the table border, IE does not. Here's the simplified table code and the related css code: Table -> Code: <table class="listings" style="width: 100%;"> <tr> <td colspan="2" class="darkRow">Category 1</td> </tr> <tr> <td style="width: 30%" class="lightRow">Thread 1</td> <td style="width: 70%" class="lightRow">This is thread number 1.</td> </tr> <tr> <td style="width: 30%" class="lightRow">Thread 2</td> <td style="width: 70%" class="lightRow">This is thread number 2.</td> </tr> </table> CSS code -> Code: <style type="text/css">
table.listings{
border-collapse: collapse;
border-style: none;
}
table.listings tr{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
vertical-align: top;
}
.darkRow{
background-color: #4D3D4D;
border-color: #4D3D4D;
color: white;
padding-left: 4px
}
.lightRow{
background-color: #BFACBF;
border-color: #4D3D4D;
color: #4D3D4D;
padding-left: 4px;
}
</style>
It seems as if IE doesnt support borders around a whole row, because when i add this: Code: table.listings td{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
vertical-align: top;
}
With that also IE displays a border but not only around the whole row, but around all the cells individually, which is not my intention. Does anybody have an idea what i can do about this? thanks in advance. Hi there, Everyone: Firstly, I am a CSS noob... My site is: wwwDOTincenseforpeaceDOTcom (change the word DOT to a . please, new users are not allowed to post URLs on this forum. Thanks) I have a red background gif on my site. In firefox, it looks great. It DOESN'T show through the cell borders of the main table. However, it is showing through the cell borders of a table in Internet Explorer (at least IE 8, haven't checked with earlier versions of IE). Any idea on how to get it to stop showing through on IE? This is what I THINK is the main table CSS (I told you I am a noob when it comes to CSS). #content-container{ clear:both; width:100%; border-style:solid; border-color:#666666; border-spacing:0; border-width:0 0; /* was border-width:1px 0; before */ padding:0 0 0 0; margin:0; /* ie6 min-height hack */ height:270px; max-height:270px !important; Thanks in advance. |
|||||||