изменить интервал столбцов и размер шрифта в таблице HTML 5 на основе нет.колонны

Question

Я создаю динамическую таблицу HTML, как показано на скриншоте. Пользователь может выбрать несколько версий (v1, v2 и т. Д.), И мне нужно показать сравнение между V0 и выбранными версиями (в настоящее время на рисунке мы показываем V0 против v1).Теперь проблема в том, что между столбцом слишком много места, если мы выбираем только одну версию для сравнения.

Можем ли мы увеличить размер шрифта и уменьшить расстояние между столбцами, если у нас есть только 2 версии длясравните и настройте его как нет.версий, с которыми нужно сравниваться, увеличивается?

Насколько я знаю, медиазапросы могут применяться на основе размеров экрана, но это не применимо в моем случае.

Answer 1

Вы можете изменить font size на основе number of column с помощью JavaScript.

Я создал образец фрагмента ниже, посмотрите.

var fontSize = 36;
var fontSizePerColumn = 12; // default 3 columns;

if($("table tr").children("td").length<=3){
  fontSize = 36;
}else{
  fontSize -= (($("table tr").children("td").length-3)*fontSizePerColumn);
}


if(fontSize <=12)
  fontSize = 12;


$("table tr").children("td").css("font-size", fontSize+'px');

table tr td{
  font-family:calibri;
  font-size:36px;
  border:1px solid black;
  border-collapse:collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1">
  <tr>
    <td width="50%">Column 1</td>
    <td width="25%">Column 2</td>
    <td width="25%">Column 3</td>
    <td width="25%">Column 3</td>
  </tr>
</table>

Вы можете проверить jsfiddle здесь.