Topic: tables - border for specific rows

The <tr> element does not support the border attribute and I don't want to set this border attribute for the <td> element, as I have some cellpadding and it doesn't look good.

Is there any other way the make a border around a row within a table ?

thanks

Re: tables - border for specific rows

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>tables - border for specific rows</title>
<style type="text/css" media="all">
<!--
td{ padding:10px; }
.even{ background-color:#eee; }
.odd{ background-color:#ccc; }
.selected td{
    border-color:red;
    border-top:3px solid;
    border-bottom:3px solid;
}
.selected td.first_col{ border-left:3px solid; }
.selected td.last_col{ border-right:3px solid; }
-->
</style>
</head>

<body>
<table cellpadding="0" cellspacing="0">
    <tr class="even">
        <td class="first_col">Row: 1 Col: 1</td>
        <td >Row: 1 Col: 2</td>
        <td class="last_col">Row: 1 Col: 3</td>
    </tr>
    <tr class="odd">
        <td class="first_col">Row: 2 Col: 1</td>
        <td >Row: 2 Col: 2</td>
        <td class="last_col">Row: 2 Col: 3</td>
    </tr>
    <tr class="even selected">
        <td class="first_col">Row: 3 Col: 1</td>
        <td >Row: 3 Col: 2</td>
        <td class="last_col">Row: 3 Col: 3</td>
    </tr>
    <tr class="odd">
        <td class="first_col">Row: 4 Col: 1</td>
        <td >Row: 4 Col: 2</td>
        <td class="last_col">Row: 4 Col: 3</td>
    </tr>
</table>
</body>
</html>


Basically, just add the class of "selected" to the row you want to add the border to. Then add the class "first_col" to the first <td> and "last_col" to the last <td> to render the left and right borders.

Chris

Re: tables - border for specific rows

@ignition, thanks for the hint

boemitsu wrote:

...as I have some cellpadding and it doesn't look good.

aargh...sorry...it's not cellpadding, but cellspacing...

any ideas ?

Re: tables - border for specific rows

Could you post the table HTML and any CSS for the table that you're working with?

Chris

Re: tables - border for specific rows

This is a fragment of the generated HTML code, What I am trying do to is to make a border around the <tr> with a specific id-#, which is unique on the document, by adding a class-name via RJS

If you need some further information, let me know that.

thanks.

RJS

page['row-1024'].addClassName('modified')

generated HTML
<table cellpadding=5px>
.
.             
.       
    <tr>

      <td colspan=3><a href="#" onclick="copyValues('client'); return false;">Copy current values</a> </td>
    </tr>
   
     <tr>
        <td></td><td></td>
        <td class="col-head">Estimated<br>Values</td><td></td>
        <td></td><td></td>
        <td class="col-head">Current<br>Values</td><td></td> 
     </tr>
         
    <tr class=row1 id="row-1024">

        <td colspan=2>Average Somevalue</td>     
                    <td class="curr-col">1'500</td>

                    <td class="dummy"></td>
                    <td class="dummy"></td>   
                    <td class="dummy"></td>                         
                    <td class="ref-col" id="reftotal-1024"></td>
                    <td class="dummy"></td>         

    </tr>               
 
    <tr class=row2 id="row-1025">

        <td colspan=2>Average Somevalue</td>     
                    <td class="curr-col">1'200</td>
                    <td class="dummy"></td>
                    <td class="dummy"></td>   
                    <td class="dummy"></td>                         
                    <td class="ref-col" id="reftotal-1025"></td>

                    <td class="dummy"></td>         

    </tr>               
       
.
.
.         
<--!all rows have the same structure as they get generated -->
.
.

    <tr>

       <td><br/></td>
    </tr> 

    <tr><td colspan=4><h3>SomevalueInformation</h3></td></tr>
   
   
    <tr>
        <td colspan=4></td>
        <td class="col-head">Estimated<br>Somevalue</td>

    </tr>
   
   
    <tr class=row1 id="row-1005">

        <td colspan=2>Somevalue</td>
     
                  <td class="curr-col">30</td>
                  <td class="dummy"></td>
                  <td class="curr-col" id="estim-1005">
                 
                 
                  3'544
                   </td>   
                 
     
    </tr>     

.
.
</table>


css
.col-head {
text-align:center;
font-weight:bold;
}

.row1{
    background-color: #7998b4;
    color:white;   
}

.curr-col{
    text-align:right;
    width:100px;
}

.ref-col{
    text-align:right;   
}


.row1 .ref-col{
    text-align:right;
    background-color:#AABDCF;
    color:black;   
}

.row2 .ref-col{
    text-align:right;   
}

.dummy{
    background-color:white;
}

.subtotal,.total{
background-color:#EBEFF4;
font:normal normal bold 22px/18px arial;
}

Last edited by boemitsu (2007-07-11 03:30:49)

Re: tables - border for specific rows

Wow, lots of <td>s. Do you have a screenshot with what you want it to look like. That would be very helpful.

Thanks,
Chris

Re: tables - border for specific rows

It's kind of calculation sheet...I know there are many <td> but I have to assure that all cells are on the same coordinates all over the table

http://www.tomodachi.ch/tomodachi_gallery/main.php?g2_view=core.DownloadItem&amp;g2_itemId=41701&amp;g2_serialNumber=2

Last edited by boemitsu (2007-07-11 03:39:03)

Re: tables - border for specific rows

Thanks for the screenshot. I don't have time to work on this right away, but why don't you use a thick white border on the right and the bottom of your <td> tags using CSS.

td{
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
}

This will create a faux look of cellspacing using CSS.

That way you can remove the cellspacing and cellpadding on your table and work everything with CSS like the first example I showed you.

Try that.

Chris

Re: tables - border for specific rows

I just applied a white border to the bottom and right <td> tags form my last example:

Note: I've only tested this in Win IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>tables - border for specific rows</title>
<style type="text/css" media="all">
<!--
td, th{
    padding:10px;
    border-right:3px solid #fff;
    border-bottom:3px solid #fff;
}
th{ background-color:#eee; text-align:left; }
.even{ background-color:#eee; }
.odd{ background-color:#ccc; }
.selected td{
    border-color:red;
    border-top:3px solid;
    border-bottom:3px solid;
    border-right:0px;
}
.selected td.first_col{ border-left:3px solid; }
.selected td.last_col{ border-right:3px solid; }
-->
</style>
</head>

<body>
<table cellpadding="0" cellspacing="0">
    <tr>
        <th colspan="4">Title Row Here</th>
    </tr>
    <tr class="even">
        <td class="first_col">Row: 1 Col: 1</td>
        <td >Row: 1 Col: 2</td>
        <td class="last_col">Row: 1 Col: 3</td>
    </tr>
    <tr class="odd">
        <td class="first_col">Row: 2 Col: 1</td>
        <td >Row: 2 Col: 2</td>
        <td class="last_col">Row: 2 Col: 3</td>
    </tr>
    <tr class="even selected">
        <td class="first_col">Row: 3 Col: 1</td>
        <td >Row: 3 Col: 2</td>
        <td class="last_col">Row: 3 Col: 3</td>
    </tr>
    <tr class="odd">
        <td class="first_col">Row: 4 Col: 1</td>
        <td >Row: 4 Col: 2</td>
        <td class="last_col">Row: 4 Col: 3</td>
    </tr>
</table>
</body>
</html>

Re: tables - border for specific rows

Chris, thanks a lot for taking time helping me in this issue.

Ignition wrote:

but why don't you use a thick white border on the right and the bottom of your <td> tags using CSS.

That way you can remove the cellspacing and cellpadding on your table and work everything with CSS like the first example I showed you.

Thats a great idea ! I will try that.

Re: tables - border for specific rows

well, putting borders around <td> doesn't solve the problem neither as there will always remain a small gap between the cells.

I solved it in another way. I put a 15px width border to the first cell of that row...

Adding a class to the first cell within a row happens in the RJS file

@modified_records.each{|d|
  page['row-' << d[1]].down(0).addClassName('modified')
} unless @modified_records.blank?

RJS and Prototype is really a cool combination... smile

Re: tables - border for specific rows

Nice snippet. I'll keep that one in mind.