CSS - What Would The Cellpadding & Cellspacing For Table Be In Css??

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
}

I cant seem to get my cellpadding working for tables, what do i have to input. I have tried:

.header {background:#2D759F; width:100%; cellpadding:5}

all the others work, jus the cellpadding which does not.

please check this page http://www.mueddat.com/index2.php

i'm using in the table tag where the select input exist the following cellspacing attribute
Code:

<table width="97%" align="center" cellspacing="4">

why it doesn't appear in Mozilla Firefox?

2nd question
How to change the color of the select box blue area (where the arrow is) from light blue to brown?

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

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

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>

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?

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

I have a textarea in a <td>which asks for users for some description.

If users enter text and don't use any space or enter, the
width of the table gets bigger and bigger and damages the pages
design.


What can I add (to td.fixed_width css for example )to make the line
break after the width of the table is reached???


There is a solution that I put a div in td and then
Code:

#desc {
	width:"100%";
	width::fixed;
	overflow:scroll;}

but it is not exactly what I want

hi every one...

How can I display static headers in a table, so that headers remain visible while user scrolls the table body?

This is not working in IE 7 any working example please

2.
iam having a column which holds data around some 100 to 200 characters...
by default i want to display some 50 characters and rest of the characters can be viewed by moving the column...

if this is possible let me know how to do it with some sample code......i dont know much about CSS

3. One more problem iam facing is with the number of columns displayed in the table.

I have to display around 15 to 20 columns in a table...
with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page)

I need a fixed table width and height and also fixed column width and height.....
Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns)

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 a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically.

Thanks for reading.

I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
  <body>
    <table>
      <tbody>
        <tr>
          <td>
           1<br>2<br>3<br>4<br>5<br>
          </td>
          <td style="background: blue;">
            <table style="height: 100%; background: red;">
              <tbody>
                <tr>
                  <td style="vertical-align: bottom">
                    Test
                  </td>
                </tr>
              </tbody>
            </table>
          </td>          
        </tr>      
      </tbody>
    </table>
  </body>
</html>