使用表头使用样式组件的colspan属性

Question

colspan属性在使用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>

我正在尝试使用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/styled-components@4.0.1/dist/styled-components.min.js"></script>
<div id="root"/>

但是正如您从摘要中看到的那样，它不起作用。我已经尝试了几种属性。

如果我将其作为常规属性发送到我的JSX上，它仍然可以使用。喜欢：

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

UPDATE：实际上，上面的代码在SO上起作用。但是在我的本地环境中，我必须像colSpan

一样将其驼峰传递

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

我在做什么错？

PS：到目前为止，仅在Chrome中进行过测试。