CODEWITHSUNDEEP
csshtml-table
steveq
steveq

Reputation: 21

Styling (fixing width) of columns within a specific table without affecting other tables

I wish to fix the width (in pixels) of three columns in a table without affecting other tables by styling. I can achieve the desired effect by styling the columns see the code below. However the styling on the columns below is not linked to a specific table. I wish to use styling so that I do not need to use the <col ...> line every time I use the specified table. i.e. what I wish to do is link the fixing of the column width to a specific table. The code below does not link the col.tablerightcol1 to the table.tableright which is what I wish to do. 

<head>
<title> xxxxx </title>
<style type="text/css">

table.tableleft { 
          width: 140px ;
        align centre ; 
        }


table.tableright { 
          background-color: #E8E8E8 ; 
        width: 840px ; 
        height: 220px ;
         }

col.tablerightcol1 { 
          align: right ;
          width:220px ;
         }
col.tablerightcol2 { 
          align: center ;
          width:400px ;
         }
col.tablerightcol3 { 
          align: center ;
          width:220px ;
         }

</style>
</head>

<html>
<body >
<table border=2 class = "tableright" >
  <col class="tablerightcol1" />
  <col class="tablerightcol2" />
  <col class="tablerightcol3" />
    <tr>
        <td >
....

Upvotes: 2

Views: 1331

Answers (2)

csgero
csgero

Reputation: 2773

You could use the CSS3 nth-child pseudo-class selector, but it's not supported by any of versions of IE up to 8.0 (see http://reference.sitepoint.com/css/pseudoclass-nthchild for details).

table.tableright col:nth-child(1) { align: right; width:220px; }

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630429

You can make the selector take this into account, for example:

table.tableright col.col1 { align: right; width:220px; }
table.tableright col.col2 { align: center; width:400px; }
table.tableright col.col3 { align: center; width:220px; }

And matching markup:

<table border="2" class="tableright" >
  <col class="col1" />
  <col class="col2" />
  <col class="col3" />

This way your styles only affect <col> elements with that class if they're inside a <table class="tableright"> element.

Upvotes: 0

Related Questions