colspanを指定した時のdisplay変更時は、table-rowを指定。(CSS)

jsからCSSを変更するのとかよくある処理ですが。

まず2つのtrを用意。
(1つはdisplay:none;で、tdにcolspanが指定されている)

<table>
  <tr>
    <td>Title</td>
    <td><a href="javascript:void(0);" onclick="openTr();">Open</a></td>
  </tr>
  <tr id="hidden-tr" style="display:none;">
    <td colspan="2">Content</td>
  </tr>
</table>

で、この#hidden-trを表示させるjs。

function openTr() {
    $('#hidden-tr').css('display','table-row');
}

ポイントはもちろん
.css(‘display’,’table-row’);

うっかり
.css(‘display’,’block’);
なんて指定してしまうと、colspanが効かない。

Bootstrapを使ってたので、何か影響してるのかと思ったけど、全然関係なかった・・ｗ

colspanを指定した時のdisplay変更時は、table-rowを指定。(CSS)

関連記事