I have set up a table where clicking on a button toggles the details of the corresponding row. However, I am having trouble formatting and sizing the JSON data within the table.
Is there a way to achieve this?
This is how I implemented it:
HTML
<section>
<table style="font-family: arial, sans-serif; border-collapse: collapse; width: 100%; table-layout: fixed;">
... Table content goes here ...
</table>
CSS
... CSS styling rules go here ...JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/js/jquery.js"></script>
... JavaScript functionality goes here ...
The result can be seen in the following image: https://i.stack.imgur.com/xwvGV.jpg
Thank you for any assistance.
Edit: I would like to display the JSON data as follows:
{ "MessageBody": { "IdGateway": "002", "MsgId": "a8beaabe-80da-4721-bc67-7983ee87d516", "Timestamp": "1579516070021", "Version": "1.0", "Period": "300000", "SensorsStatus": [ { "SensorId": "status", "SensorValue": "0" } ] }, "Topic": "CERT / 01234 / GICS / STATUS / 002" }