无法获取行正确显示 [英] Can't get row to display correctly

问题描述

我应该先说这个问题，说我绝对没有html / css / javascript的背景，所以请容易对我，对不起，如果我使用错误的条款，或者问一个愚蠢的问题/不提供足够的信息！ / p>

我想获得一个可扩展的表格，通过阅读论坛帖子/教程经过几轮的脚本更改（将next改为nextUntil ，尝试nth-child然后删除它等），它的工作方式，我想要的（显示接下来的2行，当一个行被点击，而不是只有一个）。

但是由于一些莫名其妙的原因，显示的行现在缩小到只有第一个td的宽度。当点击时，隐藏的行是正确的宽度。

现在的表格是此处。

jsFiddle显示行）似乎显示正确的宽度是这里。

无法插入代码或无法发布此问题：

  $（document）.ready function（）{
 $（＃report tr.show）。click（function（）{
 $（this）.nextUntil（tr.show）。toggle b $（this）.find（。arrow）。toggleClass（up）; 
 $（this）.find（。show 
 $（this）.find（。show）。fadeToggle（350）; 
}）; 
 // $（＃report）。jExpand（）; 
}）; 
  

当我删除tr class =show，行恢复到正确的宽度，但我没有看到任何应该导致这种行为发生（因为上一个表没有这个问题，只有一个很大的区别是行数和javascript的变化，没有CSS更改，没有添加样式表。）

任何帮助真诚感谢，我失去了如何进行！ / p>

解决方案

我想你可以补充css中的小变化：

this css

  .show {
 display：block; 
} 
  

使用此CSS：

  .show {
 display：table-row; 
} 
  

I should preface this question by saying I have absolutely no background in html/css/javascript whatsoever, so please go easy on me and sorry if I use the wrong terms or am asking a silly question/not providing enough info!

I'm trying to get an expandable table to work, and after going through several rounds of script changes by reading forum threads/tutorials (changing "next" to "nextUntil", trying nth-child and then removing it etc), it's working the way I want it to (showing the next 2 rows when a row is clicked instead of just one).

However for some inexplicable reason, the rows displayed are now shrunk to only the width of the first td. When clicked, the hidden rows are the right width.

The table as it looks like now is here.
The jsFiddle showing the rows (the current version) which seems to show correct width is here.

Had to insert code or I couldn't post this question:

$(document).ready(function(){
     $("#report tr.show").click(function(){
         $(this).nextUntil("tr.show").toggle();
         $(this).find(".arrow").toggleClass("up");
         $(this).find(".show").not(".show").fadeOut(350)
         $(this).find(".show").fadeToggle(350);
     });            
     //$("#report").jExpand();
});

When I remove the tr class="show", the row reverts to the right width, but I don't see anything that should cause this behaviour to happen (since the previous table didn't have this problem, and the only big difference from that one is the number of rows and the javascript changes. No CSS changes were made, and no stylesheets were added.)

Any help is sincerely appreciated, I am at a loss of how to proceed!

解决方案

I think you can replease small changes in css:

Replease this css

.show {
  display: block;
}

With this css:

.show {
  display: table-row;
}

这篇关于无法获取行正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！