Using The Table Head Colspan Attribute Using Styled-components

The colspan attribute works fine on a table built with HTML & CSS.

th, td { border: 1px solid black } <table> <thead> <tr> <th colspan="2">Major 1</th> <th colspan="2">Major 2</th> </tr> <tr> <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> </tr> </thead> <tbody> <tr> <td>data1</td> <td>data2</td> <td>data3</td> <td>data4</td> </tr> </tbody> </table>

I am trying to implement this very same thing using styled-components.

const styled = window.styled; const LS = {}; LS.TableHead_TH = styled.th` /* THINGS I'VE TRIED IN HERE */ colspan: 2; col-span: 2; column-span: 2; /* <--- THIS IS SUGGESTED BY AUTOCOMPLETE */ `; function Table() { return( <table> <thead> <tr> <LS.TableHead_TH>Major 1</LS.TableHead_TH> <LS.TableHead_TH>Major 2</LS.TableHead_TH> </tr> <tr> <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> </tr> </thead> <tbody> <tr> <td>data1</td> <td>data2</td> <td>data3</td> <td>data4</td> </tr> </tbody> </table> ); } ReactDOM.render(<Table/>, document.getElementById("root")); th, td { border: 1px solid black } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <script src="//unpkg.com/[email protected]/dist/styled-components.min.js"></script> <div id="root"/>

But as you can see from the snippet, it does not work. And I've tried several properties.

If I send it as a regular attribute on my JSX, it still works. Like:

<LS.TableHead_TH colspan="2">Major 1</LS.TableHead_TH> <LS.TableHead_TH colspan="2">Major 2</LS.TableHead_TH>

UPDATE: Actually the code above worked here on SO. But on my local environment, I had to pass it camelCased, like colSpan

<LS.TableHead_TH colSpan="2">Major 1</LS.TableHead_TH> <LS.TableHead_TH colSpan="2">Major 2</LS.TableHead_TH>

What am i doing wrong?

PS: Tested only in Chrome, so far.