小编Ron*_*ald的帖子

在Table Fixed Header中,我需要将所有文本放在固定标题下,并且固定标题不要错位.这适用于第二个表中的所有内容.但是,第二个表中的所有内容都在98%宽度内.

在第一个表中,我有一个TD标签,其中white-space:nowrap将所有内容保存在1行,因此当overflow-x发生时,固定标头变得不对齐.如何修复此固定标头以匹配表头并且不会错位？

所以当Overflow-X:Auto发生时我需要这个.我想要水平滚动,这样很好,但它是固定的标头,混乱.

您可能必须更改视点的大小才能看到这种情况

我相信它可能在CSS或JQUERY中我需要进行调整但无法弄清楚如何调整....

JSFIDDLE https://jsfiddle.net/rbla/1Ljuycbe/61/

.up:hover {
    cursor:pointer;
}

.tooltip2 {
    position: relative;
    display: inline-block;
    border-bottom: 3px dotted black; /* If you want dots under the hoverable text */
    text-decoration: none; 
    color: #00F;
}

img.cadre {
    border: 3px solid #D2D1D1; 
    border-radius: 4px; 
    width: 125px;
    height: 125px;
}

.tooltip2 .tooltiptext2 { 
    visibility: hidden;
    width: 130px;
    background-color: #fff;
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    border-radius: 6px;
    margin-left: 7px;
    position: absolute;
    z-index: 0;
}

.tooltip2:hover .tooltiptext2 {
    visibility: …

表头是固定的,但在滚动后它位于页面的顶部.它完全按照我的要求工作,除了thead被固定在错误的地方.

该表有一个overflow-x:auto,而TD正在使用white-space:nowrap,因此表扩展以处理内容.

我需要它从页眉的顶部或右下方固定140像素.我无法弄清楚如何抵消这个......它很接近,但需要考虑溢出......

这是JSFIDDLE - https://jsfiddle.net/rbla/1Ljuycbe/1/

请查看FIRST表...问题在于OVERFLOW-X:AUTO - 我需要克隆表来反映这一点......

JQUERY

 ;(function($) {
   $.fn.fixMe = function() {
  return this.each(function() {
     var $this = $(this),
        $t_fixed;
     function init() {
        $this.wrap('<div class="container" />');
        $t_fixed = $this.clone();
        $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
        resizeFixed();
     }
     function resizeFixed() {
        $t_fixed.find("th").each(function(index) {
           $(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
        });
     }
     function scrollFixed() {
        var offset = $(this).scrollTop(),
        tableOffsetTop = $this.offset().top,
        tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
        if(offset < tableOffsetTop || offset > tableOffsetBottom)
           $t_fixed.hide();
        else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
           $t_fixed.show(); …

我正在尝试使我的 Google Column Material Chart 具有响应性，但对我来说似乎有点不稳定并且根本无法正常工作。谁能帮我把这个流程做好

图表只会在页面加载时以该格式显示。当浏览器窗口宽度改变时，它不会动态调整大小。

JSFIDDLE https://jsfiddle.net/rbla/Le8g0sw0/8/

HTML

<div id="chart">
    <div id="chart_div"></div>
</div>

CSS

#chart {
   border:5px solid #AAA;
   width: 80%; 
   min-height: 450px;
}

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script>

  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', 'Profit'],
      ['2014', 1000, 400, 200],
      ['2015', 1170, 460, 250],
      ['2016', 660, 1120, 300],
      ['2017', 1030, 540, 350]
    ]);

    var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      }, …