How to allow formatting of a table in a Widget?

[Calli]

Hi!

Within our instance, we have a field in the SPM module that reflects any text placed within the Portal, more specifically in a Widget.

(table in the back-end)

(table in the portal)

I would like to know how I can allow the same formatting as I have within the 'Executive Summary' field within the Portal Widget.

[Juhi Poddar]

Hello @Calli 

This will require adding CSS to the widget.

Script to create table:

<div class="table-container">
    <table class="table-custom">
        <thead>
            <tr>
                <th>Teste</th>
                <th>Teste 2</th>
                <th>Teste 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>12/12</td>
            </tr>
            <tr>
                <td>A</td>
                <td>C</td>
                <td>12/12</td>
            </tr>
            <tr>
                <td>C</td>
                <td>D</td>
                <td>11/12</td>
            </tr>
        </tbody>
    </table>
</div>

CSS referring the above script:

/* Table styling */
.table-custom {
    width: 100%;
    border-collapse: collapse;
    font-family: Verdana, sans-serif;
    font-size: 8pt;
}

/* Header cells styling */
.table-custom th {
    background-color: #284960; /* Darker blue for the header */
    color: white;
    padding: 8px;
    text-align: center;
    border: 1px solid #d9d9d9;
}

/* Table cells styling */
.table-custom td {
    background-color: #3a5a78; /* Lighter blue for cells */
    color: white;
    padding: 8px;
    text-align: center;
    border: 1px solid #d9d9d9;
}

/* Optional: Add spacing/margin for outer edge */
.table-container {
    padding: 10px;
    border: 2px solid #f0f0f0; /* Outer border color */
    display: inline-block;
}

Hope this helps!

"If you found my answer helpful, please like and mark it as the "accepted solution". It helps others find the solution more easily and supports the community!"

Thank You
Juhi Poddar

[Calli]

Hello!

I accessed the widget configuration to try to make the change, however, correct me if I'm wrong, but this way it will only show the test table, the same one that you attached the HTML code to.

However, the intention is that whenever the user creates a table through the back-end, as shown in the first image, it should be reflected in the same way in the widget, without the need to manually change the code in each situation.

[Juhi Poddar]

Hello @Calli 

You are right, data appears will definitely be populating from back-end.

Do you need help in creating the table as well?

In the above code the script to create table is an example to understand how CSS is applied to the class in HTML code for table. Referencing the classes associated with different html tags.

"If you found my answer helpful, please like and mark it as the "accepted solution". It helps others find the solution more easily and supports the community!"

Thank You
Juhi Poddar

[Calli]

Hi @Juhi Poddar!

Please, if possible, I would like to!

Thank you.