CSS style table borders

11-01-2013, 10:27 AM

TavMaster-T TavMaster-T is offline

Regular

Join Date: Aug 2004

Location: St Louis

Posts: 72

CSS style table borders

I'm trying to define borders in a CSS style but it's not working for me. It works more to my liking if I define the border outside of the style.

This gives me borders I like with a border around the table and each cell:

HTML Code:

    <style type="text/css">
        .style2
        {
            font-family: Arial;
        }
    </style>

    <table class="style2" border="1">
        ...

I tried to do this to define the border in the style but it only puts a border around the outside of the table, the cells don't have a border.

HTML Code:

    <style type="text/css">
        .style2
        {
            font-family: Arial;
            border: 3px solid;
        }
    </style>

    <table class="style2">
        ...

I've tried adding various key words the style in various combinations like this:

HTML Code:

        .style2
	table, td
        {...

but nothing seems to work the way I want. I want a border around the table and between each cell in the main table but no borders on any nested tables.

How can this be accomplished using the style definition? Any advice would be greatly appreciated.

11-01-2013, 05:04 PM

PlausiblyDamp

Ultimate Contributor

Forum Leader
* Expert *

Join Date: Nov 2003

Location: Newport, Wales

Posts: 2,058

Would something like

Code:

table, th, td
{
border: 1px solid black;
}

not do it?

__________________
Intellectuals solve problems; geniuses prevent them.
-- Albert Einstein

Posting Guidelines Forum Rules Use the code tags

11-05-2013, 02:40 PM

TavMaster-T TavMaster-T is offline

Regular

Join Date: Aug 2004

Location: St Louis

Posts: 72

Thanks for the reply. That doesn't do what I want. I have a main table that I don't want to show borders. Within that table are tables that I want borders to show. Within those tables are more nested tables that I don't what to show borders.

I'm thinking maybe I need to do something like my second example but define a style for the <td> tags as well.

11-05-2013, 04:04 PM

PlausiblyDamp

Ultimate Contributor

Forum Leader
* Expert *

Join Date: Nov 2003

Location: Newport, Wales

Posts: 2,058

Out of interest is there a reason you are nesting tables inside tables inside tables? From a design perspective alone that is probably a very difficult thing to manage.

If you really must keep this structure then I suppose you could do something like

Code:

table.someClassName, th, td
{
border: 1px solid black;
}

and make sure the tables that require styling have the someClassName class applied to them.

I would really consider not nesting tables in this way though.

__________________
Intellectuals solve problems; geniuses prevent them.
-- Albert Einstein

Posting Guidelines Forum Rules Use the code tags

11-08-2013, 07:13 AM

TavMaster-T TavMaster-T is offline

Regular

Join Date: Aug 2004

Location: St Louis

Posts: 72

I haven't found a way to get the look I want without nested tables. My environment is Visual Web Developer. I actually have a table that contains several FormView controls. Some of the FormView controls contain tables that have 1 level of nested tables.

To see an example, put this in an html file. (these examples don't use styles but they illustrate what I'm trying to d.o)

Code:

<table border=1>
  <tr>
    <td width=40px>
      xxx
    </td>
    <td>
      <table>
        <tr>
          <td>22</td>
          <td>°F</td>
        </tr>
        <tr>
          <td>33</td>
          <td>°F</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      yyy
    </td>
    <td>
      <table>
        <tr>
          <td>44</td>
          <td>°F</td>
        </tr>
        <tr>
          <td>55</td>
          <td>°F</td>
        </tr>
      </table>
    </td>
  </tr>
</table>


<br />
<br />


<table border=1>
  <tr>
    <td width=40px rowspan="2">
      xxx
    </td>
    <td>22</td>
    <td>°F</td>
  </tr>
  <tr>
    <td>33</td>
    <td>°F</td>
  </tr>
  <tr>
    <td rowspan="2">
      yyy
    </td>
    <td>44</td>
    <td>°F</td>
  </tr>
  <tr>
    <td>55</td>
    <td>°F</td>
  </tr>
</table>

The first table is what I want. For each row there is a cell on the left that spans multiple rows to the right. The cell on the right contains 2-3 rows with 2 columns. I want borders round the the cell on the left and the group of cells on the right but not around the individual cells on the right. Defining global styles for td, th, etc will show borders on every cell whether I used nested tables or not. It seemed that if I specify a style for the outer table the same style would be applied to the nested table as well.

At this point I have things working the way I want. I just thought there might be an easier way to use styles. Thanks for the advice!