$('#table_a').css('display', 'none');
$('#table_b').css('display', 'block');
と記述すればよいのでは?
→tableの幅が縮む現象発生。
(block要素になっているので当然)
解決法:
(select部分は割愛)
(html側)
<!--このブロックAと-->
<table hidden id="table_a">
<tr>
<td>aaa</td>
</tr>
</table>
<!--このブロックBの、表示非表示を切り替えたい-->
<table hidden id="table_b">
<tr>
<td>aaa</td>
</tr>
</table>
(js側)
$('#select_kind').on('change',function(){
if(if (hoge=="1"){
$('#table_a').css('display', 'none');
$('#table_b').css('display', 'table');//ここをblockにしてしまうとtableが縮む
}else{
$('#table_a').css('display', 'table');
$('#table_b').css('display', 'none');
}
これでtableの幅が縮まない。
突き止めるのに半日もかかってしまいました。やれやれ。