jQuery表扩展器在Chrome中工作，但在Firefox中不工作

我有一个Pelican（static site generator，静态站点生成器）网站，它可以将预标记中的代码转换为行编号的语法彩色表，并且我尝试在每个生成的代码表中添加一个按钮，以便在将表扩展到全尺寸（其中一条长线导致它超出容器）和完全适合容器的尺寸之间切换

我集成了一些Javascript来实现它（这不是我的强项），它在Chrome中工作，但Firefox不喜欢它（尽管恼人的是不会抛出任何控制台错误）

$（文档）.ready（函数（）{
//设置用于扩展的代码框
var site_width=$（'.entry content'）.width（）；
$（'table.highlighttable'）。每个（函数（）{
//将每个代码块的宽度存储在其tabindex中，以便以后检索
$（this.attr（'tabindex'，$（this.width（））；
});
//最初将所有代码块限制为站点宽度（可能是CSS）
$（'table.highlighttable'）.css（'width'，site_width）；
//向每个代码块添加按钮以展开/折叠
$（'.code pre'）。追加（''）；
jQuery（“.code展开”）。单击（函数（）{
var natural_width=$（this）.closest（'table.highlighttable'）.attr（'tabindex'）；
var site_width=$（'.entry content'）.width（）；
if（$（this）.closest（'table.highlighttable'）.width（）>site\u width）{
//如果代码展开，则折叠代码
$（this）.closest（'table.highlighttable'）.css（'width'，site_width）；
$（this.html（“»”）；
}否则{
//如果代码已折叠，请展开代码
$（this）.closest（'table.highlighttable'）.css（'width'，natural_width）；
$（this.html（“«”）；
}
返回false；
});
});
填充填充填充填充填充填充填充填充填充填充填充填充填充
.参赛内容{
宽度：300px；
边框：1px实心#000；
}
.高光桌{
表布局：固定；
边框：1px实心#F00；
}

明白了-这甚至不是Javascript问题，而是CSS问题。我使用的是Bootstrap，它将表的最大宽度设置为100%。Chrome似乎很乐意覆盖它，但Firefox不会，除非你覆盖CSS中的最大宽度。

我把它添加到一个代码笔中，奇怪的是它在Firefox中工作。所以我浏览了我的页面，删除了所有其他的JS和CSS，但它在Firefox中仍然不起作用！

$(document).ready(function() {
    // set code boxes up for expanding
    var site_width = $('.entry-content').width();
    $('table.highlighttable').each(function() {
        // store each code block's width in its tabindex for later retrieval
        $(this).attr('tabindex', $(this).width());
    });
    // initially restrict all code blocks to site width (could be CSS really)
    $('table.highlighttable').css('width', site_width);
    // add button to each code block to expand / collapse
    $('.code pre').append('<a href="#" class="code-expand">&raquo;</a>');
    jQuery(".code-expand").click(function() {
        var natural_width = $(this).closest('table.highlighttable').attr('tabindex');
        var site_width = $('.entry-content').width();
        if($(this).closest('table.highlighttable').width() > site_width) {
            // if code is expanded, collapse code
            $(this).closest('table.highlighttable').css('width', site_width);
            $(this).html('&raquo');
        } else {
            // if code is collapsed, expand code
            $(this).closest('table.highlighttable').css('width', natural_width);
            $(this).html('&laquo');
        }
        return false;
    });
});

<div class="entry-content">
  <table class="highlighttable">
    <tr>
      <td class="code">
        <div class="highlight"><pre>
      stuffstuffstuffstuffstuffstuffstuffstuffstuffstuffstuffstuffstuff
          </pre>
        </div>
      </td>
    </tr>
  </table>
</div>

.entry-content {
  width:300px;
  border:1px solid #000;
}
.highlighttable {
  table-layout:fixed;
  border:1px solid #F00;
}