Блог

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

Как я могу сделать так, чтобы столбцы в двух таблицах имели одинаковую ширину?

#html #css

Вопрос:

Как я могу сделать так, чтобы столбцы в двух таблицах имели одинаковую ширину?

Я попытался применить width свойство к td элементу для каждого столбца и свойства style = "table-layout: fixed; , но, как вы можете видеть, границы столбцов не совпадают.

JSFiddle: https: //jsfiddle.net/v2bxdygj/

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

1. У вас есть два варианта — один с использованием Javascript, второй — сделать его одной таблицей.

2. Я не могу использовать одну таблицу, потому что заголовок должен быть статическим. Вот почему я стараюсь комбинировать таблицы

3. Вы можете сделать это одной таблицей с двумя липкими строками сверху.

4. Я не могу, потому что sticky rows не работает с cdk-virtual-scroll-viewport angular, это работает, если таблица простая

5. Итак, вы можете либо присвоить каждому столбцу определенный размер, либо использовать Javascript.

Ответ №1:

Вот мой пример, который в какой-то степени работает:

 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">amp;nbsp;</td>
    <td class="col4">amp;nbsp;</td>
    <td class="col5">amp;nbsp;</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">amp;nbsp;</td>
    <td class="col4">amp;nbsp;</td>
    <td class="col5">amp;nbsp;</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Редактирование, администрирование групп и пользователей</td>
    <td>amp;nbsp;</td>
    <td>amp;nbsp;</td>
    <td>amp;nbsp;</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Создание или редактирование определения адресного элемента</td>
    <td>amp;nbsp;</td>
    <td>amp;nbsp;</td>
    <td>amp;nbsp;</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Создание или редактирование записи адресного элемента</td>
    <td>amp;nbsp;</td>
    <td>amp;nbsp;</td>
    <td>amp;nbsp;</td>
  </tr>
</table>
Метки: ,