HTML Table CSS Width Not Taking

Shotstack API
1

Using classes to set the width of a table cell but doesn’t seem to work. Tried both pixels and percentage but doesn’t make a difference. Had same issues with plain divs. Below is the code I am using with the code editor:

{
    "timeline": {
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<table class='info'><tr class='title'><th class='w20'>sample title</th><th class='w60'>&nbsp;</th><th class='w20'>item 1</th></tr><tr class='description'><td>row 2 col 1</td><td></td><td>row 2 col 3</td></tr></table>",
                            "css": ".info { height: 100%; width: 100%;background-color: #000000; cellpadding: 5px;} .w20 {width: 20%;} .w60 {width: 60%;} .title {font-family: \"Manrope Light\"; font-size:22px; color: #ffffff;} .description {font-family: \"Manrope Light\"; font-size:17px;color: #ffffff; }",
                            "width": 1280,
                            "height": 200,
                            "position": "top"
                        },
                        "start": 0,
                        "length": 6,
                        "position": "top",
                        "offset": {
                            "x": -0.01,
                            "y": 0.01
                        },
                        "transition": {
                            "in": "fade"
                        }
                    }
                ]
            }
        ],
        "fonts": [
            {
                "src": "https://templates.shotstack.io/basic/asset/font/manrope-extrabold.ttf"
            },
            {
                "src": "https://templates.shotstack.io/basic/asset/font/manrope-light.ttf"
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "hd"
    }
}
2

Hi Ezra,

I was able to reproduce your error and can confirm the width in your .info class isn’t applying to your HTML. The HTML asset can exhibit some quirks which are often alleviated using by using HTML attributes.

You can use HTML attributes to make it work the way you’re intending in your CSS:

{
    "timeline": {
        "background": "#000000",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<table cellpadding=5 width=100%><tr class='title'><th width=20%>sample title</th><th width=60%>&nbsp;</th><th width=20%>item 1</th></tr><tr class='description'><td align='center' width=20%>row 2 col 1</td><td width=60%></td><td align='center' width=20%>row 2 col 3</td></tr></table>",
                            "css": ".title {font-family: \"Manrope Light\"; font-size:22px; color: #ffffff;} .description {font-family: \"Manrope Light\"; font-size:17px; color: #ffffff; text-align: center;}",
                            "width": 1280,
                            "height": 200
                        },
                        "start": 0,
                        "length": 6,
                        "position": "top",
                        "transition": {
                            "in": "fade"
                        }
                    }
                ]
            }
        ],
        "fonts": [
            {
                "src": "https://templates.shotstack.io/basic/asset/font/manrope-extrabold.ttf"
            },
            {
                "src": "https://templates.shotstack.io/basic/asset/font/manrope-light.ttf"
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "hd"
    }
}

The above should provide you with an alternative way to show your table, but I’ve added this bug to the backlog.

3

Thanks for the help, really appreciate it!

1 Like