如果表格只有一行,则 HTML 表格中的列宽会发生变化

Posted

技术标签:

【中文标题】如果表格只有一行,则 HTML 表格中的列宽会发生变化【英文标题】:Column width changes in HTML table if the table only has a single row 【发布时间】:2021-08-14 00:41:16 【问题描述】:

我有一个一维对象数组。我需要在具有 3 列的表中显示该数组中的数据。 我为每一列分配1/3rd of 100% width,因为列数是固定的。 如果我要显示 3 个或更多对象,则一切正常。但是,如果我有 1 或 2 个对象,则列宽会发生变化,列会扩展以适应最大宽度。

Here 是我的代码。我知道到处都有内联 CSS,这是故意的。请多多包涵。我提供了一个包含 2 个对象的数组和另一个包含 4 个对象的数组,这样您就可以看出差异。 我知道我可以为不写一个单独的条件。对象小于 3,然后设置特定的宽度,但我希望这可以单独使用 CSS 解决。 如果有人能提供帮助,我将不胜感激。

编辑:我已经有一个基于 JS 的解决方案。如果数组的对象少于 3 个,我会动态计算表格宽度,如下所示。

let width = '100%';
if (listOfPeople.length < 3 && listOfPeople.length > 0) 
  width = (listOfPeople.length * 100) / 3 + '%';

这个宽度就是这样使用的

appDiv.innerhtml = `
    <table  border="0">
        <tbody>
            <td style="width: calc(100% / 3); height: 100%; max-width: calc(100% / 3); padding: 10px;">
              data
            </td>
        </tbody>
    </table>
  `;

我没有在链接代码中更新这个解决方案,因为我真的希望有一个 CSS 解决方案。如果有人有任何想法,请告诉我

【问题讨论】:

永远不要发布代码链接,代码就是文本,应该这样对待。请发布您的代码,以便我们查看:) 【参考方案1】:

我在这里添加了 2 个变量。 iterator 只是根据剩余的 listOfPeople 计算出为任何给定行创建多少 TD,perc 计算出行的宽度。

const array2 = [
  new Map([
    ['name', 'Jacqueline M. Goodrich'],
    ['img', ''],
    ['department', 'Marketing'],
    ['location', 'jhvjb']
  ]),
  new Map([
    ['name', 'Jacqueline M. Goodrich2'],
    ['img', ''],
    ['department', 'Marketing'],
    ['location', 'frds']
  ]),
  new Map([
    ['name', 'Jacqueline M. Goodrich2'],
    ['img', ''],
    ['department', 'Marketing'],
    ['location', 'frds']
  ]),
  new Map([
    ['name', 'Jacqueline M. Goodrich2'],
    ['img', ''],
    ['department', 'Marketing'],
    ['location', 'frds']
  ])
];


const array3 = [
  new Map([
    ['name', 'Jacqueline M. Goodrich'],
    ['img', ''],
    ['department', 'Marketing'],
    ['location', 'jhvjb']
  ]),
  new Map([
    ['name', 'Jacqueline M. Goodrich2'],
    ['img', ''],
    ['department', 'Marketing'],
    ['location', 'frds']
  ])
]

function doTable(listOfPeople) 
  let cardsrows = '';
  for (let i = 0; i < listOfPeople.length;) 
    let cards = '';
    let iterator = Math.min((listOfPeople.length - i), 3)
    let perc = Math.min(listOfPeople.length, 3)
    for (let col = 0; col < iterator; col++) 
      const record = listOfPeople[i];
      const card =
        `<td style="border:1px solid #ccc; width: calc(100% / $perc); height: 100%; max-width: calc(100% / $perc); padding: 10px;">info</td>`;

      cards = cards.concat(card);
      i++;
    


    const row = cards ? `<tr>` + cards + `</tr>` : ``;
    cardsrows = cardsrows.concat(row);
  
  document.getElementById('appDiv').innerHTML = `
    <table  border="0">
        <tbody>
            $cardsrows
        </tbody>
    </table>
  `;

<div id='appDiv'></div>

<button onclick='doTable(array2)'>Table for 4</button> &nbsp;
<button onclick='doTable(array3)'>Table for 2</button>

【讨论】:

不适合我。在td 上设置宽度不起作用。 @Amruta 在您的表格样式中没有重置表格布局以提供计算任何东西的机会,除非您使用 vw 单位开始,否则您可能会得到结果。如果 table-layout 未重置为固定,则 table/td 的宽度将至少为其内容的宽度。这是 table/display:table 布局行为。 stackblitz.com/edit/js-ufba8d?file=style.css @Amruta - 请用 sn-p 查看我修改后的答案。应该是你要找的…… @Amruta - 它解决了这个问题吗?如果有,请将其标记为答案。谢谢。 @Kinglish 不是这个确切的解决方案。我也动态计算了表格宽度。 if (listOfPeople.length &lt; 3 &amp;&amp; listOfPeople.length &gt; 0) width = (listOfPeople.length * 100) / 3 + '%'; 然后是 document.getElementById('appDiv').innerHTML = ` $cardsrows
`;

以上是关于如果表格只有一行,则 HTML 表格中的列宽会发生变化的主要内容,如果未能解决你的问题,请参考以下文章

表格table列宽度怎么设置都没用

html table 列宽

隐藏表格行时 HTML 列宽发生变化

jqurey datatables属性

自动调整 HTML 表格中的列宽

让DataGridView的列宽自适应内容