CSS - Formatting Table Cells

Is it not possible to do the following? What is the correct way of aligning a cell if not?

PHP Code:
 TD.theader {
    background-color: #D0D0D0;
    border: 1px solid #000000;
    padding:5px;
    horizontal-align: right;
} 

Hello,

I am working on a site and want to put a thin black line border on individual cells in a table with out putting a border on the whole table.

Im not very experienced with css and would perfer to keep it simple.

any info will help

thanks
Nick Carlevaris

is there a problem with placing div tags inside table cells.

I have a need to do this and it works fine on my FF3 and IE7 but i am told this is bad practice.

is there a problem and/or workaround to using div tags inside a table cell

I'm building a table (for tabular data, of course) and need text within cells centered. However, applying "text-align:center;" to the cells in any other way but inline styles doesn't work.

For example, this does not work:
Code:

td.centercell {
  text-align: center;
}

<table>
  <tr>
    <td class="centercell">Hi!</td>
  <tr>
</table>

But this does:
Code:

<table>
  <tr>
    <td style="text-align:center;">Hi!</td>
  <tr>
</table>

I'd rather not have to put inline styles on every single cell I need centered, as this is most of them.

What's going on?

Hello, I am attempting to have two pieces of text within a table cell that also contains an image. I was able to figure out the first piece of text that I wanted vertically aligned to the top and to the left, but the next piece of text, which I want vertically aligned to the bottom of the cell and aligned right I am having issues with. Here is the example code:
Code:

<td style"vertical-align: bottom;"><img src="image1.jpg" border="0" width="195"><font style="position: absolute;left: 2;background-color: #FFFFFF; color: #000000;font-weight: bold;font-size: 18px;">STYLE#</font><font style="position: absolute;right: ;background-color: #FFFFFF; color: #000000;font-weight: bold;font-size: 18px;">As low as $x.xxfont></td>

Is this possible within the same table cell as the image? Or do I have to place a CSS table within this cell to place text over top of the image? I would have placed the image as the cell background image, however, I am dynamically creating these tables, and not all of my images are of same size. I am specifying the width though, just not the height. Thank you in advance.

I am developing a PHP/CSS database application built for Safari and have run into a very nasty bug.

(Aside: the web application I am building is sort of browser-specific... we are an all-Mac company, so we want people to use Safari. [I'm not even trying to make it work with IE5/Mac. Screw that.] But having said that, I'd also like it to work in IE6/Win and Firefox [Mac/PC] to give people at least a few more options, like if they're on their PC at home... whatever. Just thought I would explain that before I get flamed by those who think I'm crazy for going that route.)

Anyway, I'd like to have tables with cells/columns that are hidden on the screen but visible on printouts and vice versa. But I've discovered that using display:none for table cells in the print style sheet crashes Safari. It does not affect span tags within table cells.

This will crash Safari.
Code:

td { display: none; }

This is okay.
Code:

td span.printhide { display: none; }

This is also okay, but why do this if it's still going to take up the space on the page? Might as well just leave it.
Code:

td { visibility: hidden; }

Now, I've found a workaround that works, but it's a pain. Basically, instead of setting it up like a normal table, like this:

Code:

<table>
<tr>
<td>Cell</td>
</tr>
</table>

You have to set it up like this:

Code:

<span class="table">
<span class="row">
<span class="cell">Cell</span>
</span>
</span>

As long as you give those span tags their respective display attributes, this works when you set this in your print stylesheet, for example:

Code:

span.cell { display: none; }

But the big problem with doing it this way is that you're now completely handcuffed to the stylesheet. At least if the style sheet bonks the old way, you still have a table with tabular data in it. Plus, say if the next version of Safari fixes this problem, then you'd have to go back and fix it on every page that uses these span tags in order to "unlock" the handcuffs, which kind of nullifies the purpose of style sheets in the first place.

So I guess what I'm asking is if anyone knows of a workaround that I can use that does NOT involve converting my <table><tr><td> to <span><span><span>? Thanks for reading.

Hello,
I posted this in the HTML forum too but didnt get any replies so maybe people in here know it.

When you have a table cell with a width of 20%, and you put a very long string in it. Let's say 255 chars long, without spaces in between. The cell will then expand beyond the 20% that was specified. How can you prevent this and make sure the string is broken down and goes further on a next line in the cell when the 20% width is reached?

thanks in advance

I'm fighting with this for a while now. I want to change my table layout into div based one, but keeping all the positive features of table design. The layout is based on percents and em (the liquid philosophy)

The problem:
Make div resize like table cell with minimal width equal to width of widest unbreakable element. I don't want my "verylongunnecesaryword" stick out of menu div nor dissapear partaily when resizing the window. I basically want the menu to always stay wide enough to accomodate the longest word and resize dynamically with window and fonts. There is no such problem when using tables, cells automatically resize to fit content and never become so small that content sticks out or disappear.

Setting the min-width with either em, px nor percent is a no go, because it's impossible to tell what size will the biggest element be. No javascript either. Also keeping it IE6 complaint would be good. I still think that tables are the best idea and unless someone shows me how to fix this problem with div and css, I'm just sticking with tables till the end of world.

shortened HTML:
Code:

<div class="menu">
menu here
</div>

<div class="contents">
the rest of page
</div>

shortened CSS:
Code:

.menu
{float: left;
width: 20%;
padding: 1%;
}

.contents
{float: left;
padding: 1%; 
width: 76%; 
}

Hi,

CSS whizz needed! I'm currently formatting a pre-determined HTML website using CSS. The website has been formatted with ID's for all tables and cells so I can specify which colour I'd like the background of the cells. The HTML is like this:

Code:

<table id="Description">
      <tr><th class="title">Text</th></tr>
      <tr><td class="data"><div class="ggcode">Text</div></td></tr>
    </table>

So I've been formatting it like this:

Code:

div#Main
table#Description
    .title {
    border-color:#F0E68C;
    background-color:#F0E68C; }
div#Main 
table#Description
    td.data {
    border-color:#F0E68C;
    background-color:#F0E68C; }

However the last table is like this:

Code:

    <table id="recentPosts">
      <tr>
        <th class="title">
          Recent Forum Posts
        </th>
      </tr>
              <tr>
          <td>
            <table class="data">
              <tr>
                <th>Topic</th>
                                  <th>User</th>
                                                  <th>Posted At</th>
                              </tr>
              <tr>
  <td class="clickable forumTitle"><a href="link">Text></td>
      <td class="username">Text</td>
        <td class="date">Text12/04/2009 03:25 PM</td>
  </tr>
<tr>
  <td class="clickable forumTitle"><a href="link">Text</a></td>
      <td class="username">Text</td>
        <td class="date">Text</td>
  </tr>
            </table>
          </td>
        </tr>
          </table>

I'm able to format the cells within the <table id="recentPosts">, but I can't alter the cells within <table class="data"> - the table within the table. Any ideas how I would go about doing this?

Thanks in advance

This appears to be strictly a formatting/style problem. I built a page using validated XHTML Strict and of course, it displays at it should in IE6:
http://computerslayer1.spymac.com/formpics/IE---1.gif
http://computerslayer1.spymac.com/formpics/IE---2.gif

In Opera 8, it displays for the most part, but the table containing the AV/Periphrial radio buttons is shrunk and aligned to the left. Then, when one of the radio buttons are selected, it expands, and the right side of the table appears to be missing.
http://computerslayer1.spymac.com/f...s/opera---1.gif
http://computerslayer1.spymac.com/f...s/opera---2.gif

Firefox 1.0.4 displays the tables in much the same was as opera, however, the right side is not missing, like in Opera 8.
http://computerslayer1.spymac.com/f.../firefox--1.gif
http://computerslayer1.spymac.com/f.../firefox--2.gif

Any ideas, guys? I'm stuck.

I have a table whose class is "dogs"

How do I make all the <tr> elements within the table dogs have a certain style and not all the <tr> elements on the page?

Hi everyone!

I'm taking my first CSS class and am running into some problems formatting a table. Specifically getting the rows to line up center along with the table headings. Well, except for the first one that should be left aligned.

This is my validated CSS code:

Code:

.cell-alpha {
font-size: 25px;
background-image: url('headercellbackground.png'); 
color: #FF9933;
width: 85%;
}

.cell-bravo {
font-size: 25px;
background-image: url('headercellbackground.png');
color: #FF9933;
text-align: center;
}


tbody tr.odd {
			background-color:lightyellow;
			color: red;
		}
		
tbody tr.even {
			background-color:red;
			color: white;
		}
		
		
tbody tr.total {
			background-color:#6699FF;
			color: yellow;
		}

table {
table-layout: fixed;
width: 700px;
}

How would I get each column centered since the data is entered in table row sections? Also, how to get all of the headings to line up baffle me.

This is how it SHOULD look :

URL


And this is how its rendering with my CSS:

table

hi, and thank for the help in advance.

i was wondering if it is possible to make a table cell's top border different thickness versus the sides and the bottom.

OK, I have a table I'd like to format with CSS. No problem. I have an external stylesheet that I link to for the rest of my site. I figured I'd add the CSS there and be good to go.

Nope. When I link to the external stylesheet, everything else on my page is formatted correctly, except the table. It's like the table isn't grabbing the CSS information. (Example 1)

When I take the CSS and put it in the header of the page, it works fine (same exact CSS, the only difference is where it's referenced). (Example 2)

Hello -

I am attempting to create a table of values that will have a relative style sheet that will contain a circle background image and number relative to said value.

The numbers are only being added for during the creation of requirements to reference the values. The current procedure is to create the HTML, then take a screenshot of it, and manually in a photo editor (or visio) to go in and add the numbers. (So, if we have to add another value, I have to go back in and manually update the numbers and shift everything around). I figure this would be a MUCH better way, since I can just change the visibility on the style sheet and 'poof' the numbers are all gone :-), and when I need to do a screen shot, 'wham' their back again :-D.


Here is an example of what I ideally want to achieve (created w/ Visio):
Ideal Table Look

However, here is what I am currently experiancing


Here's the style sheet that I'm using
Code:

<style type="text/css">
  div.number {  visibility:visble; 
	position: relative; 
	width: 20px; 
	height: 20px; 
	z-index: 2; 
	left: 5px;
	bottom: 35px; 
	text-align: center; 
	text-vertical-align: center;
	font-family: arial; 
	font-size: 8pt; 
	background-image: url(circle.gif); 
	background-repeat: no-repeat; 
	background-position:0px -1px
	background:none; 
	border-style:none; 
	border-width:none; 
	}
</style>

- All of the number/circles are shifted (which isn't a major problem I can probably solve the location issue myself), but the more important item that's giving me problems is the re-formatting of my Table. I would like to have the image/numbers 'hover' outside of the table cells.

Any help would be greatly appreciated.

Thanks in Advance.
Dave