несколько титров на html-столе

Question

Я пытаюсь создать таблицу с надписями слева и внизу. Но на данный момент я могу поставить только один заголовок на один стол.

это код моей таблицы html.

<table style="border: 1px solid "> 
<caption style="caption-side:left;">this is supposed to be on the x axis</caption> 

    <caption style="caption-side:bottom;">this is supposed to be on the y axis</caption> 
<tr> 
    <th>animals</th> 
    <th>food</th> 
</tr> 
<tr> 
    <td>cat</td> 
    <td>milk</td> 
</tr> 
<tr> 
    <td>dog</td> 
    <td>meat</td> 
</tr> 
</table> 

Может ли кто-нибудь помочь мне исправить это? помощь будет оценена!

Answer 1

Поскольку вы используете CSS для макета (это не табличные данные), то нет оснований использовать дисплей: настольный заголовок для колонтитула. Просто сделайте регулярный div, ширина которого равна той же таблице (или заполняет контейнер, который обертывает таблицу).

Example and Source: How do I simulate multiple table captions? - Phrogz