I have a table with each row having 4 td cells. It has a row hidden with one td colspan="4" inside it.

When I show the hidden row it ignores the colspan="4" - is this because it's hidden first of all?

Is there anyway around this?

HTML

<table>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr class="hidden" id="123">
    <td colspan="4">full width</td>
  </tr>
</table>
<a href="#" onclick="showRow(); return false;">click me</a>

Javascript

function showRow(){
  el = document.getElementById('123');
  el.style.display = 'block';
}

CSS

.hidden { display:none; }

Here's a fiddle

I have a table with each row having 4 td cells. It has a row hidden with one td colspan="4" inside it.

When I show the hidden row it ignores the colspan="4" - is this because it's hidden first of all?

Is there anyway around this?

HTML

<table>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr class="hidden" id="123">
    <td colspan="4">full width</td>
  </tr>
</table>
<a href="#" onclick="showRow(); return false;">click me</a>

Javascript

function showRow(){
  el = document.getElementById('123');
  el.style.display = 'block';
}

CSS

.hidden { display:none; }

Here's a fiddle

• javascript
• html

Share Improve this question Follow asked Sep 18, 2014 at 14:48 StudioTimeStudioTime 24.1k4040 gold badges128128 silver badges215215 bronze badges 2

• technically a table row is not a block. – epascarello Commented Sep 18, 2014 at 14:51
• working well for me on chrome, but try 'table-row' instead of 'block' – Hotted24 Commented Sep 18, 2014 at 14:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

It is not a block, it is a table row

el.style.display = 'table-row';

It would be better to just remove the hidden class.

el.classList.remove("hidden");  //FYI, not all browsers support classList

In you Javascript, change

el.style.display = 'block';

to

el.style.display = 'table-row';

see jsFiddle