Как рассчитать наименьшую ширину HTML-таблицы в JavaScript? - PullRequest
Новая
       61

Как рассчитать наименьшую ширину HTML-таблицы в JavaScript?

1 голос
/ 03 апреля 2019

У меня есть таблица, которая занимает большую часть страницы. Ширина составляет calc(100% - 20px).

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

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

Мне интересно, как я могу вычислить эту «наименьшую допустимую ширину» таблицы в JS или jQuery, фактически не меняя размер моего окна, а затем делая $('table').width() или что-то подобное. Стоит отметить, что эта «наименьшая допустимая ширина» является переменной в зависимости от содержимого таблицы. Я неплохо искал и не нашел хороших ответов. 

/*table style*/ 
table#myTableId{
    display: table; 
    margin: 10px; 
    width: -webkit-calc(100% - 20px);
    width: -moz-calc(100% - 20px);
    width: calc(100% - 20px);
}

1 Ответ

1 голос
/ 03 апреля 2019

Вы можете временно установить очень маленькую ширину таблицы и проверить текущую ширину в этот момент, используя getBoundingClientRect. 

const table = document.getElementById('myTableId');
// get the original width in case it was set
const originalWidth = table.style.width;
// set the table's width to 1px (0 does not work)
table.style.width = '1px';
// get the current width
const smallestWidth = table.getBoundingClientRect().width;
// set the original width back 
table.style.width = originalWidth;

console.log(smallestWidth);
table#myTableId {
  display: table;
  margin: 10px;
  width: -webkit-calc(100% - 20px);
  width: -moz-calc(100% - 20px);
  width: calc(100% - 20px);
}
<table id="myTableId">
  <tr>
    <td>Table Cell Content</td>
  </tr>
</table>
...