Border-collapse style for table seems to behave wrong

Shotstack API
1

Hi Shotstack Team,

I’m trying to generate text with transparent background and red border in my video, Please see example below.

{
    "timeline": {
        "background": "#000000",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "width": 670,
                            "height": 663,
                            "html": "<table border='0' width='1000'><tr><td bgcolor='#FF0000' height='10' width='10'></td><td bgcolor='#FF0000' height='10' width='990'></td></tr><tr><td bgcolor='#FF0000' width='10'></td><td width='990'><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam est. Sed tempor ipsum id blandit sollicitudin. Aliquam erat volutpat. Duis dictum dictum mauris euismod viverra. Nunc malesuada eros sed elit auctor, a tincidunt lacus hendrerit.</p></td></tr><tr><td bgcolor='#FF0000' height='10' width='10'></td><td bgcolor='#FF0000' height='10' width='990'></td></tr></table>",
                            "css": "table {border-style: none; border-collapse: collapse} p {color: #FFFF00}"
                        },
                        "fit": "none",
                        "scale": 1,
                        "offset": {
                            "x": -0.025,
                            "y": 0.063
                        },
                        "position": "center",
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        },
                        "start": 0.04,
                        "length": 1.5
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "size": {
            "width": 1080,
            "height": 1920
        },
        "quality": "high",
        "scaleTo": "mobile",
        "fps": 30
    }
}

According to API documentation border-collapse: collapse should work for table as well as border-style: none. I would expect to see solid red frame in the output video, but still see borders between cells. Is it a bug? Is there any available workaround?

Thanks in advance!

2

Hi. It must have to do with the HTML you are creating. ShotStack only supports certain parameters in HTML and CSS, not all. You can check the elements supported in the following link.

3

I checked all tags one by one and found one attribute “height” not supported by td tag according to documentation. I have also figured out that “border-style: none” is not required in order to achieve the desired result.

I have simplified my payload as following

{
    "timeline": {
        "background": "#FFFFFF",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "width": 670,
                            "height": 663,
                            "html": "<table width='400'><tr><td bgcolor='#FF0000' width='10'></td><td bgcolor='#FF0000' width='400'></td></tr><tr><td bgcolor='#FF0000'></td><td width='400'><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam est. Sed tempor ipsum id blandit sollicitudin. Aliquam erat volutpat. Duis dictum dictum mauris euismod viverra. Nunc malesuada eros sed elit auctor, a tincidunt lacus hendrerit.</p></td></tr><tr><td bgcolor='#FF0000' width='10'></td><td bgcolor='#FF0000' width='400'></td></tr></table>",
                            "css": "table {border-collapse: collapse}"
                        },
                        "fit": "none",
                        "scale": 1,
                        "offset": {
                            "x": -0.025,
                            "y": 0.063
                        },
                        "position": "center",
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        },
                        "start": 0.04,
                        "length": 1.5
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "size": {
            "width": 1080,
            "height": 1920
        },
        "quality": "high",
        "scaleTo": "mobile",
        "fps": 30
    }
}

Here are remaining tags and attributes:
Tags: table, tr, td, p

Attributes:

  • table:width
  • td: bgcolor, width

All tags, attributes and CSS style are supported according to documentation. However there is difference between something I would expect

expected
expected916×360 35.5 KB

and something actually rendered instead

actual

Is my expected result achievable at all with html in shotstack?

4

I have tried a whole bunch of things and I don’t think it is possible to get rid of those borders around the cells. Is there a different design we could help you acheive. How does the video look now? Perhaps there is another idea that will work without too much effort.

1 Like
5

Thank you for checking! I believe I have an idea of the workaround - I can render four filled bars in for different layers.