max-width ничего не делает для таблиц

Question

Я пытаюсь сделать очень простую вещь (подумал я), но она просто не работает.Если я установлю стиль таблицы следующим образом:

    table {
     width: 537px;
     height: 19px;
     max-width:  100%; 
    }

<table>
  <tr>
    <td style="background-color: #ffe129;">text</td>
    <td style="background-color: #bdff4d;">text</td>
  </tr>
</table>

Тогда ширина таблицы будет 537px, даже если ширина моего окна равна 400px.Div будет 400px.

Добавление display:block к стилю таблицы разбивает таблицу: смотрите здесь

Answer 1

Я определю, например, max-width: 537px;, а затем передам width: 100%, таким образом, потребуется max-width, равное 537px , если вы скажете width:100%;он всегда будет с учетом ширины экрана и не будет превышать 537px

table
{
 width: 100%;
 height: 19px;
 max-width:  537px; 
}

<table>
<tr>
<td style="background-color: #ffe129;"></td>
<td style="background-color: #bdff4d;"></td>
</tr>
</table>