сделать последние столбцы двух таблиц одинаковой ширины - PullRequest
Новая
       19

сделать последние столбцы двух таблиц одинаковой ширины

0 голосов
/ 05 ноября 2019

У меня есть две таблицы. Я хочу, чтобы последний столбец Таблица A имела ту же ширину, что и последний столбец Таблица B .

Примечание:

  • обе таблицы имеют одинаковую ширину.

Как этого добиться?

таблица A: 

<table>
<tr>
  <td>First column</td>
  <td>Second column</td>
  <td>Third column</td>
  <td>Fourth column</td>
</tr>
<tr>
  <td>More data for the first column</td>
  <td>More data for the second column</td>
  <td>More data for the third column</td>
  <td>More data for the fourth column</td>
</tr>
</table>

таблица B: 

<table>
<tr>
  <td>First column</td>
  <td>Second column</td>
  <td>Third column</td>
  <td>Fourth column</td>
  <td>Fifth column</td>
</tr>
<tr>
  <td>More data for the first column</td>
  <td>More data for the second column</td>
  <td>More data for the third column</td>
  <td>More data for the fourth column</td>
  <td>More data for the fifth column</td>
</tr>
</table>

1 Ответ

1 голос
/ 05 ноября 2019

Это достигается с помощью: селектора last-child.

Метод 1: Использование только css 

tr td:last-child {
    width:100px;
}

Метод 2: Использование изменения размера окна Js On для получения ширины первых таблиц последнего столбцаЯ поставил его на второй стол. При необходимости обработайте границы, отступы и поля.

См. Фрагмент кода ниже. 

window.onload = calWidth;
window.onresize=function(){
calWidth();
}
function calWidth(){
var colWidth = document.querySelector('#table1 tr td:last-child').offsetWidth;
var borderwidth = 4;
document.querySelector('#table2 tr td:last-child').style.width = (colWidth - borderwidth) +'px';
}
tr td{
border:solid 1px black
}
<table id="table1">
<tr>
  <td>First column</td>
  <td>Second column</td>
  <td>Third column</td>
  <td>Fourth column</td>
</tr>
<tr>
  <td>More data for the first column</td>
  <td>More data for the second column</td>
  <td>More data for the third column</td>
  <td>More data for the fourth column</td>
</tr>
</table>

<table id="table2">
<tr>
  <td>First column</td>
  <td>Second column</td>
  <td>Third column</td>
  <td>Fourth column</td>
  <td>Fifth column</td>
</tr>
<tr>
  <td>More data for the first column</td>
  <td>More data for the second column</td>
  <td>More data for the third column</td>
  <td>More data for the fourth column</td>
  <td>More data for the fifth column</td>
</tr>
</table>
...