html - 如何使两个表中的列具有相同的宽度？

Question

如何使两个表中的列具有相同的宽度？

我尝试将width属性td应用于每列和属性的元素，style = "table-layout: fixed;但如您所见，列的边界不匹配。

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

标签： htmlcss

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