根据 no 更改 html 5 表中的列间距和字体大小。列的答案

【问题标题】：change column spacing and font size in html 5 table based on no. of column根据 no 更改 html 5 表中的列间距和字体大小。列的
【发布时间】：2019-04-02 04:54:09
【问题描述】：

我正在创建一个动态 HTML 表格，如所附屏幕截图所示。用户可以选择多个版本（v1、v2 等），我需要显示 V0 与所选版本之间的比较（当前在图像中，我们显示的是 V0 与 v1）。现在的问题是：如果我们只选择一个版本进行比较，那么列之间的空间太大。

如果我们只有 2 个版本来比较和调整它，我们是否有办法增加字体大小和减少列间距？要比较的版本增加了吗？

据我所知，媒体查询可以根据屏幕尺寸应用，但不适用于我的情况。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您可以使用 JavaScript 在 number of column 的基础上更改 font size。

我在下面创建了示例代码段，看看。

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。

【讨论】：

感谢您的意见。我打算使用纯CSS。我和一个团队成员讨论了这个问题，我们得出结论，我们可以在 tr 上使用带有“flex-flow:row nowrap”的弹性盒子。并且可以将列宽固定为 20vw（例如）。但是比我们坚持这个场景，如果我们有 10 个版本来比较并且 UI 超出了视口宽度，那么当我们使用“flex-flow：row nowrap”时，不会出现水平滚动条。因此，现在我正在研究是否可以在表格的 tr 上具有“flex-flow: row nowrap”的同时进行水平滚动。