CSS - Cellpadding And Cellspacing With Css?

Hi,

At long last, I've managed to figure out how to emulate the HTML cellspacing attribute in CSS. So I thought that I'd post it here so everyone can use it.

Here's the code:
Code:

.cellspacing td {
	border-right : 3px solid #FFF;
}
.cellspacing td:last-child {
	border-right : 0px;
}
.cellspacing th {
	border-right : 3px solid #FFF;
}
.cellspacing th:last-child {
	border-right : 0px;
}

Just add the cellspacing class to a table tag and it creates a white 3px border between each column throughout the table.

It's a shame the CSS designers haven't made this easier by having a proper built-in cellspacing attribute, but until they do, this is the next best thing, I guess.

Enjoy.

Debbie

Is something conformable to cellspacing-color? Or can I have change cellspace color?

EDIT: Border problem solved by adding a border-style.

I have some (table)border and (cell)padding commands that are not responding in any significant way.

Let me first explain what you should see. Then show you the code. It should appear is a black rectangle. Inside this are cells which all have an area of 3px around them. The cells are colored but the area around them should be white (set default color if possible). This white padding should also be right inside the black border, as well as between all cells equally.

I may be trying to achieve this the wrong way; I am new to using padding/spacing/border at all, let alone the changes in CSS. Here's the code:


CSS:
Code:

.results_main_table
{
width: 536px;
height: 101px;
border: 1px;
border-color: #000000;
border-style: solid; #just added to fix borders
}

.results_main_cell
{
width: 534px;
height: 101px;
}

.results_content_table
{
width: 534px;
height: 99px;
}

.results_pic_bg
{
height: 93px;
width: 93px;
background-color: #F2F2F2;
padding: 3px;
}

.results_infobar_short
{
width: 214px;
height: 21px;
background-color: #F6F6F6;
padding: 3px;
}

.results_infobar_medium
{
width: 215px;
height: 21px;
background-color: #CCCCCC;
padding: 3px;
}

.results_infobar_long
{
width: 350px;
height: 21px;
background-color: #F6F6F6;
padding: 3px;
}

.results_infobar_fav
{
width: 79px;
height: 21px;
background-color: #F6F6F6;
padding: 3px;
}

HTML:
Code:

		<table class="results_main_table">
		<tr>
			<td class="results_main_cell">
				<table class="results_content_table">
				<tr>								
					<td class="results_pic_bg" rowspan="3"></td>
					<td class="results_infobar_short">&nbsp;&nbsp;[username]</td>
					<td class="results_infobar_medium">&nbsp;&nbsp;[age] years old</td>
				</tr>
				<tr>
					<td class="results_infobar_short">&nbsp;&nbsp;[sex_stat]</td>
					<td class="results_infobar_medium">&nbsp;&nbsp;Body Type: [body]</td>
				</tr>
				<tr>
					<td class="results_infobar_long">&nbsp;&nbsp;Location: [city], [state/province], [CC]</td>
					<td class="results_infobar_fav"><center>ADD to FAV</center></td>
				</tr>
				</table>
			</td>
		</tr>
		</table>

I am constructing a table (needs to be table) where the first 2 columns of data need to have no spacing in between them. However I want the rest of the columns to have spacing of say 4px. Is this possible?

I cant create a table within a table to solve the problem either because all of the cells in the table are related. I tried setting the table to have no spacing and then applying margins to the cells i want to have margins, but no margins were applied. Any ideas?

Is there a way to override CSS padding to use cellpadding instead or can inheritance be prevented? I have a CMS and I want editors to still be able to use the cellpadding attribute rather than make a class for each desired padding.

I am not able to set a defining ID or class on the table as it's generated with our CMS. The relevant tables are contained in a defined parent class.


Code:

TD{ padding: 0px; }
.custom TD{ /*padding: ignore;*/ }

Code:

<span class="custom">
    <table cellpadding="5">
         ...
    </table>
<span>

So I am using tables for a specific part of a website and I'm running into a problem with how IE vs Everything else is treating the CSS for it.

I have the padding and margins set to 0 for the table/cells/rows etc and this works perfectly in everything BUT.......wait for it...........wait for it........ IE where it is putting what I believe to be a 2px cellpadding which wouldn't matter except that the background color and border are different colors so it looks bad. Now the only way I've been able to solve this is by adding a 'cellspacing="0" cellpadding="0" in the HTML of the table...but this then messes things up for every OTHER browser..... Anyway around this seeing as how apparently css has no 'cellpadding or cellspacing' attribute?

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;
	}

Hey guys,

I'm having trouble with the cellpadding on a "tab" on my page. I've got a div that has a table with a single cell inside it. The table is left justified in the div and has a black background. I can't give the table cell a fixed width because a word of variable length will appear inside it. The text in the cell appears aligned center and valigned middle, with 10 pixels of padding on the left and right sides.

This appears exactly right in every browser but IE 6 on Windows, where the left and right padding is lost, and the word is bumped right up to the edge of the black table cell. How can I fix this? Thanks a lot.

Here's the page:
http://aoi2.keysandwings.com/about.php

Here's the HTML:

Code:

<div class="relativetitle"">
  <table class="titletable">
    <tr>
      <td align="center" valign="middle">About</td>
   </tr>
  </table>
</div>

And here's the CSS:

Code:

.relativetitle {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  width: 682px;
  height: 30px;
  color: white;
  background: transparent;
  font-size: larger;
  text-align: left
}

.titletable {
  height: 100%;
  padding-left: 10px;
  padding-right: 10px;
  background: black
}

Hello!
What is the equivalent of the cellpadding="0" in CSS?
I use Code:

padding:0;

,but it seems that it doesn't work.
Any ideas?
Sincerely
Artashes

hi, i'm designing my page and i would like my tables to look similarily as Dev Shed Forums table in the "main menu" (the starting page).

i cannot find out how this is done: the first table row uses cellspacing, the second row doesn't use it and the third row uses it again.
(where 1st row is where "Forum,Last Post,Threads,Posts" is written, 2nd with "Programming Languages" and 3rd with "PHP Development")

well, maybe it's not done this way at all (i tried to decode the HTML code but it was too complicated for me), but i would like to ask if it can be done somehow this way (eg: to define a table with cellspacing and then override this setting in one specific row with some CSS rule) or i have to use more tables to achieve this effect?

it came in to my mind when i saw something similar in the Dev Shed Forum's HTML code:
Code:

<td style="padding: 0px;">

is there something similar which influences cellspacing?
thank you