Question

我正在重写一个可视化表示数据的Web应用程序，并希望自动填充可用宽度（之前的版本有一些用户可选择的缩放因子）。我已将布局简化为：

.bar {
  height: 25px;
  background: green;
  color: white;
}

<table>
  <thead>
    <tr>
      <th></th>
      <th>column #1</th>
      <th>column #2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row #1</td>
      <td>
        <div class="bar" style="width:50px">
          cell #1
        </div>
      </td>
      <td>
        <div class="bar" style="width:150px">
          cell #2
        </div>
      </td>
    </tr>
    <tr>
      <td>row #2</td>
      <td>
        <div class="bar" style="width:100px">
          cell #3
        </div>
      </td>
      <td>
        <div class="bar" style="width:75px">
          cell #4
        </div>
      </td>
    </tr>
  </tbody>
</table>

应调整条的宽度，使整个表填充水平可用空间（左列应保持其宽度，理想情况下不应更改表的高度）。列数以及行数将有所不同。

我可以完全控制生成的html，因此解决方案可能会使用不同的标记（只需注意计算出的条形宽度不限于几个值）。

重要的是条的相对长度不会改变。在此示例中，单元格＃4中的条带应始终比单元格＃1中的条带长50％。应该可以在条形内部放置文本而不应该拉伸它（因此，我无法通过CSS转换解决我的问题）。

解决方案可能使用JavaScript。我认为我可以通过测量左侧空间然后手动缩放每个条来使其仅使用JavaScript，但这似乎很脆弱且难以维护（给定的示例已经简化）。

有优雅的解决方案吗？我发现很难找到这个问题，所以我可能忽略了一些东西（通常我从不需要提问，因为其他人之前也遇到过类似的问题）。

编辑：似乎我写了太多文字而且实际问题变得不清楚了。我正在寻找一种解决方案，从给定的代码片段缩放表格内的条形，以便表格占用所有可用的垂直水平（太仓促的编辑）空间。需要注意的是，所包含的条形应保持其相对长度。

Answer 1

只需一点点JavaScript和略微修改的CSS文件，您就可以完成您想要的任务。这将计算列数（减去初始列）并均匀分布其宽度。

<style>
.bar {
  height: 25px;
  background: green;
  color: white;
}

table{
  width: 100%;
}

table tbody tr td:first-child{
  width: 20%;
}

table tbody tr td{
  width: 40%;
}
</style>

然后你的HTML

<table>
  <thead>
    <tr>
      <th></th>
      <th>column #1</th>
      <th>column #2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row #1</td>
      <td>
        <div class="bar" data-value="50">
          cell #1
        </div>
      </td>
      <td>
        <div class="bar" data-value="100">
          cell #2
        </div>
      </td>
    </tr>
    <tr>
      <td>row #2</td>
      <td>
        <div class="bar" data-value="80">
          cell #3
        </div>
      </td>
      <td>
        <div class="bar" data-value="75">
          cell #4
        </div>
      </td>
    </tr>
  </tbody>
</table>

然后是一些简单的JavaScript：

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

<script>
$(document).ready(function(){
  var v, b, n, max = 0;
  var t = $('table');
  var w = t.width();

  // Set equal width for all columns
  var c = (80/(t.find('thead tr th').length-1));

  // Set widths of internal bars relative to the max value
  $('.bar')
    .parent()
      .css({width: c + "%"})
      .end()
    .each(function(){
      // Determines max value
      v = parseFloat($(this).attr('data-value'));
      if(v>max){
        max = v;
      }
    })
    .each(function(){
      // Sets each bar to be a percent width based on max value
      b = $(this);
      n = (((parseFloat(b.attr('data-value')) / max) * 100));
      b.css({width: n + "%"})
    });

});
</script>

Answer 2

在您需要“固定”的第一列上创建class，同时在第2列和第3列创建id's。将div添加到4个<table> <thead> <tr> <th class="fixed"></th> <th class="col">column #1</th> <th class="col">column #2</th> </tr> </thead> <tbody> <tr> <td class="fixed">row #1</td> <td class="col"> <div class="bar" id="cell1" style="width:50px"> cell #1 </div> </td> <td class="col"> <div class="bar" id="cell2" style="width:150px"> cell #2 </div> </td> </tr> <tr> <td class="fixed">row #2</td> <td class="col"> <div class="bar" id="cell3" style="width:100px"> cell #3 </div> </td> <td class="col"> <div class="bar" id="cell4" style="width:75px"> cell #4 </div> </td> </tr> </tbody> </table>栏，以便我们可以尊重它们宽度：

的 HTML

100%

接下来在table上应用table{ width: 100%; } .bar { height: 25px; background: green; color: white; } .fixed{ width: 200px; text-align: center; } .col{ text-align: left; width: auto; }宽度，然后分别将所需宽度应用于三列，使它们总和达到100％。

的 CSS

div

最后，按照id获取每个width并将其设置为document.getElementById("cell1").style.width = ((50/150)*100)+"%"; document.getElementById("cell2").style.width = ((150/150)*100)+"%"; document.getElementById("cell3").style.width = ((100/150)*100)+"%"; document.getElementById("cell4").style.width = ((75/150)*100)+"%";，如下所示，考虑到150px是您的基础：

的 JS

function select_image_Callback(hObject, eventdata, handles) % hObject handle to select_image (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) [filename, pathname] = uigetfile({'*.jpg';'*.png'},'File select'); selected_image=strcat(pathname,filename); axes(handles.axes1); imshow(selected_image); % --- Executes on button press in filter_image. function filter_image_Callback(hObject, eventdata, handles) % hObject handle to filter_image (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) selected_image=getimage(handles.axes1); h = ones(5,5) / 25; Filtered_image = imfilter(selected_image,h); axes(handles.axes2); imshow(Filtered_image);

我希望这有帮助！

水平拟合内容

2 个答案: