How can I make columns in two tables have same width? - html

Question

How can I make columns in two tables have the same width?
I tried applying the width property on the td element for each column and the property style = "table-layout: fixed; but as you can see, the boundaries of the columns do not match.
JSFiddle: https://jsfiddle.net/v2bxdygj/

Answer 1

Here is my sample which works to some extent:
table {
border: 1px solid grey;
border-collapse:collapse;
width: 100%;
table-layout:fixed;
}
td {
border: 1px solid grey;
padding-left: 5px;
padding-right: 5px;
white-space: nowrap;
}
td span {
white-space: nowrap;
}
.code {
width: 40px;
}
.name {
width: 548px;
}
.colspan {
width: 588px;
}
.col3, .col4, .col5 {
width: 10%;
}
<table>
<tr>
<td class="code"><button>Код</button></td>
<td class="name"><button>Название</button></td>
<td class="col3"> </td>
<td class="col4"> </td>
<td class="col5"> </td>
</tr>
<tr>
<td class="colspan" colspan="2"><input type="text"> <span>Фильтр по коду и названию...</span></td>
<td class="col3">Разрешено</td>
<td class="col4">Запрещено</td>
<td class="col5">Неопределено</td>
</tr>
</table>
<table>
<tr>
<td class="code">1</td>
<td class="name">Вход в систему</td>
<td class="col3"> </td>
<td class="col4"> </td>
<td class="col5"> </td>
</tr>
<tr>
<td>2</td>
<td>Редактирование, администрирование групп и пользователей</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>Создание или редактирование определения адресного элемента</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>4</td>
<td>Создание или редактирование записи адресного элемента</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>