Блог

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

Как заставить 1 столбец таблицы иметь ту же ширину, что и другой столбец

#html #css #bootstrap-4

#HTML #css #начальная загрузка-4

Вопрос:

У меня есть таблица с несколькими столбцами, которые динамически заполняются данными. Я бы хотел, чтобы столбец 3 был любой ширины, и я хочу, чтобы столбец 4 имел ту же ширину, что и столбец 3. Возможно ли это?

Комментарии:

1. Пожалуйста, поделитесь своим html и css. И что вы имеете в виду под «любой шириной, которую он захочет»? Вы хотите, чтобы таблица занимала весь экран или занимала как можно меньше места? Будьте подробны.

Ответ №1:

Вам нужен JS для решения этой проблемы с помощью прослушивателя событий, чтобы запустить скрипт сразу после загрузки страницы: document.addEventListener("DOMContentLoaded", function(){ ... });

Вы можете получить ширину элемента, используя: document.querySelector('.row-3').offsetWidth;

затем вы устанавливаете ширину другого элемента, используя: ...style.width = ...

Проблема в том, что offsetWidth получаем ширину элемента вкл. заполнение и граница. Таким образом, мы должны установить <tr> в css значение: box-sizing: border-box; . Тогда ширина также будет включать отступы и границы. Другая проблема заключается в том, offsetWith что значение ширины будет округлено до полных пикселей. Таким образом, из-за округления разница в освещенности составляет до 0,5 пикселей.

 document.addEventListener("DOMContentLoaded", function(){
  let rowWidth = document.querySelector('.row-3').offsetWidth;
  document.querySelector('.row-4').style.width = rowWidth   "px";
}); 
 td {
  border: 1px solid black;
  padding: 5px;
  box-sizing: border-box;
} 
 <table>
  <tr>
    <td>A1</td>
    <td>A1</td>
    <td class="row-3">A3 extra wide</td>
    <td class="row-4">A4</td>
    <td>A5</td>
  </tr>
  <tr>
    <td>B1</td>
    <td>B1</td>
    <td>B3</td>
    <td>B4</td>
    <td>B5</td>
  </tr>
  <tr>
    <td>C1</td>
    <td>C1</td>
    <td>C3</td>
    <td>C4</td>
    <td>C5</td>
  </tr>
</table>