tags:

views:

369

answers:

5
Q: 

Setting class on HR breaks TD colspan

Hi,

I have a nested table arrangement for displaying data. I want the nested table to be in a TD that spans all the parent table columns. So I have colspan set. However I also want the user to be able to click on the parent to hide/unhide the child data. This works fine in IE8, but in FireFox and Chrome the nested table is ignoring the colspan and is only sown in the first column.

The code below is an example of the problem. If you click the first column text you'll see what I mean. The final row of data isn't classed so it shows ok on page load, but once the class is set it goes wrong again.

Any thoughts?

Thanks.

<!DOCTYPE html PUBLIC "-//W3C//thD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/thD/xhtml1-transitional.thd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<script type="text/javascript">
function expandRow(rowID, clickRow)
{
    var item = document.getElementById(rowID);
    if(item.className=='hidden'){
     item.className = 'unhidden';
    }else{
     item.className = 'hidden';
    }
}
</script>
<style type="text/css">
.hidden { display: none; }
.unhidden { display: block; }
</style>
<title>Table Test</title>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="collapsed" onclick="expandRow('id30', this);">Click Here to Expand</td>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
    </tr>
    <tr class="hidden" id="id30">
      <td colspan="4">
        <table>
          <tbody>
            <tr>
              <td>data1</td>
              <td>data2</td>
              <td>data3</td>
              <td>data4</td>
              <td>data5</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td class="collapsed" onclick="expandRow('id95', this);">Click Here to Expand</td>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
    </tr>
    <tr class="hidden" id="id95">
      <td colspan="4">
        <table>
          <tbody>
            <tr>
              <td>data1</td>
              <td>data2</td>
              <td>data3</td>
              <td>data4</td>
              <td>data5</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td class="collapsed" onclick="expandRow('id96', this);">Click Here to Expand</td>
      <td>This one</td>
      <td>displays ok</td>
      <td>until you set the class!</td>
    </tr>
    <tr id="id96">
      <td colspan="4">
        <table>
          <tbody>
            <tr>
              <td>data1</td>
              <td>data2</td>
              <td>data3</td>
              <td>data4</td>
              <td>data5</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>
+1  A: 

change the css line about unhidden to: .unhidden { display: table-row; }

block is an invalid style for trs.

Allain Lalonde  2009-09-01 16:07:57
if you do this the .unhidden class becomes useful only to certain element types, and older browsers won't recognise the value. Better to keep a generic class generically useful.
annakata  2009-09-01 16:21:10
A: 

only change this part of CSS

<style type="text/css">
.hidden { display: none; }
.unhidden { display:; }
</style>
andres descalzo  2009-09-01 16:10:05
that is *so* not going to parse, you're jsut getting the effect of having no rule at all
annakata  2009-09-01 16:11:04
+1  A: 

Get rid of your unhidden class entirely - it's completely redundant. Instead just remove the hidden class from the element to allow it to return to it's natural state, in this case: 

item.className = '';

But normally I would recommend a replacement:

item.className = item.className.replace(/\bhidden\b/gi,'');

(and fwiw, personally I find "removed" more semantically correct than "hidden" which I would reserve for dealing with the visibility property)

annakata  2009-09-01 16:12:54
Thanks. The solution is so blindingly obvious I could be quite embarrassed that I didn't think of it before posting. Your comment on the use of removed over hidden also makes sense, so I shall get that sorted at the same time.
javadeveloper  2009-09-02 09:17:21
A: 

Why don't you just remove the styling altogether:

<style type="text/css">
.hidden { display: none; }
.unhidden { }
</style>
Keith  2009-09-01 16:24:04
A: 

I solved it, using this info by just declaring .vis {display:block;display:table-row} Old IE ignores the table-row, ff and IE8 use it.

 2010-09-27 19:05:27

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?