水平调整内容

Question

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

.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>

应调整条形的宽度，使 table 作为一个整体填充水平可用的 space（左列应保持其宽度，理想情况下 [=45] 的高度=] 不应更改）。列数和行数会有所不同。

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

重要的是不要改变条的相对长度。在此示例中，单元格 #4 中的条形图应始终比单元格 #1 中的条形图长 50%。条形内应该可以有文本并且不应该被拉伸（因此，我无法通过 CSS 转换解决我的问题）。

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

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

编辑: 看来我写的太多了，实际问题变得不清楚了。我正在寻找一种解决方案，可以从给定的代码片段中缩放 table 内的条形，以便 table 占据所有可用的垂直水平（太仓促了编辑）space。需要注意的是，包含的条应保持其相对长度。

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 "fixed"，还有第二和第三 columns.Add id's 到 4 div 条，所以我们可以根据它们的宽度来操纵它们：

HTML

    <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>

接下来在 table 上应用 100% 宽度，然后将所需的宽度分别应用到您的三列，以便它们总和为 100%。

CSS

table{
    width: 100%;
}
.bar {
  height: 25px;
  background: green;
  color: white;
}
.fixed{
    width: 200px;
    text-align: center;
}
.col{
    text-align: left;
    width: auto;
}

最后，通过其 id 获取每个 div 并设置其 width 如下，考虑到 150px 是您的基础：

JS

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)+"%";

希望对您有所帮助！

水平调整内容

Fitting content horizontally

html

javascript

css

scale