Составление содержания по горизонтали

Question

Я переписываю веб-приложение, которое визуально представляет данные, и хотел бы, чтобы результат автоматически заполнил доступную ширину (в предыдущей версии было несколько коэффициентов масштабирования, выбираемых пользователем). Я упростил макет к следующему:

.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 всегда должна быть на 50% больше, чем в ячейке # 1. Должно быть возможно иметь текст внутри баров, и он не должен растягиваться (поэтому я не мог решить свою проблему с преобразованиями 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 в бары , чтобы мы могли манипулировать ими по их ширине:

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> 

Затем нанесите 100% ширину на table, а затем применить требуемую ширину ваших трех столбцов соответственно таким образом, чтобы их сумму до 100%.

CSS

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

И наконец, получить каждый div его id и установить его 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)+"%"; 

Надеюсь, это было полезно!