CSS style table borders
CSS style table borders
CSS style table borders
CSS style table borders
CSS style table borders
CSS style table borders CSS style table borders CSS style table borders CSS style table borders CSS style table borders CSS style table borders CSS style table borders CSS style table borders
CSS style table borders CSS style table borders
CSS style table borders
Go Back  Xtreme Visual Basic Talk > > > CSS style table borders


Reply
 
Thread Tools Display Modes
  #1  
Old 11-01-2013, 10:27 AM
TavMaster-T TavMaster-T is offline
Regular
 
Join Date: Aug 2004
Location: St Louis
Posts: 72
Default 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.
Reply With Quote
  #2  
Old 11-01-2013, 05:04 PM
PlausiblyDamp's Avatar
PlausiblyDampCSS style table borders PlausiblyDamp is offline
Ultimate Contributor

Forum Leader
* Expert *
 
Join Date: Nov 2003
Location: Newport, Wales
Posts: 2,057
Default

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
Reply With Quote
  #3  
Old 11-05-2013, 02:40 PM
TavMaster-T TavMaster-T is offline
Regular
 
Join Date: Aug 2004
Location: St Louis
Posts: 72
Default

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.
Reply With Quote
  #4  
Old 11-05-2013, 04:04 PM
PlausiblyDamp's Avatar
PlausiblyDampCSS style table borders PlausiblyDamp is offline
Ultimate Contributor

Forum Leader
* Expert *
 
Join Date: Nov 2003
Location: Newport, Wales
Posts: 2,057
Default

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
Reply With Quote
  #5  
Old 11-08-2013, 07:13 AM
TavMaster-T TavMaster-T is offline
Regular
 
Join Date: Aug 2004
Location: St Louis
Posts: 72
Default

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!
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump

Advertisement:





Free Publications
The ASP.NET 2.0 Anthology
101 Essential Tips, Tricks & Hacks - Free 156 Page Preview. Learn the most practical features and best approaches for ASP.NET.
subscribe
Programmers Heaven C# School Book -Free 338 Page eBook
The Programmers Heaven C# School book covers the .NET framework and the C# language.
subscribe
Build Your Own ASP.NET 3.5 Web Site Using C# & VB, 3rd Edition - Free 219 Page Preview!
This comprehensive step-by-step guide will help get your database-driven ASP.NET web site up and running in no time..
subscribe
CSS style table borders
CSS style table borders
CSS style table borders CSS style table borders
CSS style table borders
CSS style table borders
CSS style table borders CSS style table borders CSS style table borders CSS style table borders CSS style table borders CSS style table borders CSS style table borders
CSS style table borders
CSS style table borders
 
CSS style table borders
CSS style table borders
 
-->