Question

我正在根据CSS网格布局制作网站。一切正常，除了表格一个网格项。而且该问题仅在Firefox中出现（至少在Chrome和Edge中不存在，对Safari也不了解）。

当我想使用javascript删除表中的行时，Firefox而不是减小表的大小，而是垂直拉伸剩余的行。

这里是代码（已删除并运行，然后单击删除按钮）

const button = document.getElementById('button');
const table = document.getElementById('tableBody');
const main = document.getElementById('main');


button.addEventListener('click', () => {
	table.removeChild(table.children[table.children.length - 1]);
});

.main {
  display: grid;
}

.table {
  background: #999;
}

.button {
  position: fixed;
  right: 1rem;
  top: 1rem;
}

<div id="main" class="main">
  <table class="table">
    <tbody id="tableBody">
      <tr><td>Item 1</td></tr>
      <tr><td>Item 2</td></tr>
      <tr><td>Item 3</td></tr>
      <tr><td>Item 4</td></tr>
      <tr><td>Item 5</td></tr>
      <tr><td>Item 6</td></tr>
    </tbody>
  </table>
</div>
<button class="button" id="button">Delete</button>

是Firefox错误，还是我做错了什么？

我想出了一个解决方案，但它看起来丑陋而笨拙

const button = document.getElementById('button');
const table = document.getElementById('tableBody');
const main = document.getElementById('main');


button.addEventListener('click', () => {
  table.removeChild(table.children[table.children.length - 1]);
 
  main.style.display = 'block';
  window.getComputedStyle(main).display;
  main.removeAttribute('style');
});

.main {
  display: grid;
}

.table {
  background: #999;
}

.button {
  position: fixed;
  right: 1rem;
  top: 1rem;
}

<div id="main" class="main">
  <table class="table">
    <tbody id="tableBody">
      <tr><td>Item 1</td></tr>
      <tr><td>Item 2</td></tr>
      <tr><td>Item 3</td></tr>
      <tr><td>Item 4</td></tr>
      <tr><td>Item 5</td></tr>
      <tr><td>Item 6</td></tr>
    </tbody>
  </table>
</div>
<button class="button" id="button">Delete</button>

有人经历过并且有更好的主意吗？

CSS网格和表格。 Firefox中的怪异行为

0 个答案: