[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Can not add style to TR

Posted on 2006-05-11
6
Medium Priority
?
251 Views
Last Modified: 2008-03-10
I am having trouble adding a border to a table row with styles. I can add it to the whole table or to the cell, but I want the whole row to have a border. Certainly this is possible.

<table border="0" cellpadding="3" cellspacing="0">
<tr align=center id="BoxBordersTBRL">
      <td class="th2">Name</td>
</tr>

Thanks

T
0
Comment
Question by:td234
6 Comments
 
LVL 3

Expert Comment

by:vincent_figo
ID: 16658873
you can use the border-top, border-left, border-bottom and border-right css styles...
Like this:

tr
{
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}

This way your tr will have a black border of 1 pixel around it. And this is very flexible, you can change things just the way you want them to be... This is the way i draw borders around my tables, rows and cells...
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 16658958
@vincent...

Where is the border?

<style>
.trSel
{
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}
.trUnSel
{
border: none;
}

</style>
<script>
saveTr = null;
function selTr(theRow) {
  if (saveTr) saveTr.className='trUnsel';
  theRow.className='trSel';
  saveTr=theRow
}
</script>
<table>
<tr class="trUnSel" onClick="selTr(this)"><td>A</td><td>B</td><td>C</td></tr>
<tr class="trSel"   onClick="selTr(this)"><td>A</td><td>B</td><td>C</td></tr>
<tr class="trUnSel" onClick="selTr(this)"><td>A</td><td>B</td><td>C</td></tr>
<tr class="trUnSel" onClick="selTr(this)"><td>A</td><td>B</td><td>C</td></tr>
</table>
0
 
LVL 2

Author Comment

by:td234
ID: 16658976
Sorry, forgot to post that. Yes, I have a style sheet set up with this:

.BoxBordersTBRL { border: 1px #CCC solid; }
.BoxBordersBRL { border-bottom: 1px #CCC solid; border-right: 1px #CCC solid; border-left: 1px #CCC solid; }

This style will work on tables and cells but not rows. Wierd.

T
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 3

Expert Comment

by:vincent_figo
ID: 16658998
hmm, i alwayst thought that worked with me... :p
Maybe you can give the first cell a top, bottom and left border, the cells in the middle only a top and bottom border and the last cell a top, bottom and right border :p this will draw a border around your row... maybe not a clean sollution but it works ;)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 16659134
Here is ONE solution... Not sure it is THE solution - taken from this page: http://www.thescripts.com/forum/thread101164.html

<style>
table{border-collapse:collapse;}
tr.sel td{
border-width:1px 0;
border-style:solid;
border-color:black;
}
tr.sel td.left{
border-width:1px 0 1px 1px;
}
tr.sel td.right{
border-width:1px 1px 1px 0;
}
</style>
<script>
saveTr = null;
function selTr(theRow) {
  if (saveTr) saveTr.className='unSel';
  theRow.className='sel';
  saveTr=theRow
}
</script>

<table width="70%">
<tr onClick="selTr(this)" class="unSel">
<td class="left">Row1 Cell1</td>
<td>Row1 Cell2</td>
<td>Row1 Cell3</td>
<td class="right">Row2 Cell4</td>
</tr>
<tr onClick="selTr(this)" class="unSel">
<td class="left">Row2 Cell1</td>
<td>Row2 Cell2</td>
<td>Row2 Cell3</td>
<td class="right">Row2 Cell4</td>
</tr>
</table>
0
 
LVL 10

Accepted Solution

by:
0h4crying0utloud earned 2000 total points
ID: 16777883


You would think this is easy but no. The problem is that IE does not allow styles at the TR level. Inherited styles like font are inherited by the td so it seems like you can apply style at tr level.... but you can't.

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question