Question

我有一个Pelican（静态站点生成器）网站，它将pre标签中的代码转换为行编号的语法颜色表，并且我试图在每个生成的代码表中添加一个按钮，以便在将表扩展到全尺寸（长线使其超过容器）和尺寸整齐地放在容器内。

我已经把一些Javascript拼凑起来（不是真的我的强项）并且它在Chrome中工作，但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;
}

Answer 1

知道了 - 它甚至不是Javascript问题，是CSS。我正在使用Bootstrap并将表格设置为最大宽度为100％。 Chrome似乎很乐意覆盖它，但除非你覆盖CSS中的max-width，否则Firefox不会。

jQuery表扩展器可以在Chrome中使用，但不能在Firefox中使用

1 个答案: