使用样式组件使用表头 <th> 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"/>

但是从sn-p可以看出，它不起作用。我已经尝试了几个属性。

---

如果我将它作为我的 JSX 上的常规属性发送，它仍然有效。喜欢：

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

更新：实际上上面的代码在这里工作。但是在我的本地环境中，我不得不将它传递给camelCased，比如colSpan

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

我做错了什么？

PS：目前仅在 Chrome 中测试。

Answer 1

最好的办法是使用 CSS 网格来布置表格，grid-column: span 2；在您的样式组件中。像这样：

const styled = window.styled;

const LS = {};

LS.TableHead_TH = styled.th`
  grid-column: span 2;
`;

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 }
table { 
  display:grid;
  width:-moz-fit-content;
  width:fit-content;
  gap:2px;
  grid-template-columns:repeat(4, auto);
}
thead,tbody,tfoot, tr {
  display:contents;
}

<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"/>

---

_{可能需要基于 Chromium 的 Edge 才能在 MS 浏览器中工作。}

Answer 2

对此没有解决方案，因为colspan 是 HTML 属性，而不是 CSS 属性。有时我对这两个概念感到困惑。

自动完成建议的column-span 用于多列布局，不适用于<table>。

camelCased 可能是 React JSX 要求的，即使原始属性没有用连字符分隔。