На вашей странице много ошибок, как вы можете видеть из этого результата теста единорога: https://validator.w3.org/unicorn/check?ucn_task=conformance&ucn_uri=https%3A%2F%2Fwww.learnx.net%2Flearnx-agenda%2F&ucn_lang=en
Существует много ошибок синтаксического анализа, незакрытых тегов, которые могут привести к таким ошибкам.
ПочемуИспользуете ли вы встроенный код, если вы используете классы CSS для оформления таблицы?
На ваших страницах CSS я нашел это определение:
.agenda-table {
max-width: 96%;
margin: 100px auto 0;
}
так зачем определять witdh с помощьюснова встроенный код?
style="width: 100%;"
Я взял ваш код из вашего вопроса и заменил встроенный код классами и добавил несколько CSS.
Пример CSS:
* {
margin :0;
padding :0;
}
.agenda-table {
margin : 0 auto;
width : 100%
}
.agheader {
float : left;
width : 65%;
background : #f442bc;
}
th, tr {
float : left;
width : 100%;
text-align : left;
}
.left {
float : left;
width : 5%;
border-right : 1px solid #f442bc;
}
.right {
float : left;
width : 60%;
}
example html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<table class="agenda-table">
<tbody>
<tr class="agheader">
<th>Title</th>
</tr>
<tr>
<td class="left">xxx</td>
<td class="right">
<h4>yyy</h4>
</td>
</tr>
<tr>
<td class="left">aaa</td>
<td class="right">
<h4>bbb</h4>
</td>
</tr>
</tbody>
</table>
<table class="agenda-table">
<tbody>
<tr class="agheader">
<th>Title</th>
</tr>
<tr>
<td class="left">xxx</td>
<td class="right">
<h4>yyy</h4>
</td>
</tr>
<tr>
<td class="left">aaa</td>
<td class="right">
<h4>bbb</h4>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Вот скрипка, показывающая, что этот пример работает: https://jsfiddle.net/Thorske/bL5ktrga/11/
Определение с плавающей точкой может быть необязательным, поскольку это таблица, но этопозволяет легко переключаться из таблиц в списки.