CSS сетка и таблица. Странное поведение в Firefox - PullRequest
Новая
       13

CSS сетка и таблица. Странное поведение в Firefox

0 голосов
/ 31 октября 2018

Я делаю сайт на основе CSS сетки. Все отлично работает, кроме одного элемента сетки, который является таблицей. И эта проблема появляется только в Firefox (по крайней мере, ни в Chrome, ни в Edge, не знаю о Safari).

Когда я хочу удалить строки в таблице, используя javascript, вместо уменьшения размера таблицы, Firefox растягивает оставшиеся строки по вертикали.

Вот код (запустите snipped и нажмите кнопку удаления) 

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>

Кто-нибудь испытал это и имеет лучшую идею?

...