html - 按最大文本内容缩放表格列

Question

我想让我的表格列按列中最大长度行的文本内容进行缩放，如下所示：

问题是我为此使用了 flex，并更改了tr, th, td,table标签的顺序：

Css 文件：

.table {
  display: flex;
  width: 100%;
  table-layout: fixed;
}

.tr {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}

.td {
  border: 1px solid red;
}

反应文件：

import React from 'react';

import styles from './App.module.scss';

function App() {
  return (
    <table className={styles.table}>
      <tr className={styles.tr}>
        <th className={styles.td}>Company</th>
        <td className={styles.td}> Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste</td>
        <td className={styles.td}>Centro comercial Moctezuma</td>
      </tr>
      <tr className={styles.tr}>
        <th className={styles.td}>Contact</th>
        <td className={styles.td}>Maria Anders</td>
        <td className={styles.td}>Francisco Chang</td>
      </tr>
      <tr className={styles.tr}>
        <th className={styles.td}>Country</th>
        <td className={styles.td}>Mexico</td>
        <td className={styles.td}>UK</td>
      </tr>
    </table>
  );
}

export default App;

有没有办法实现相同的功能，但不破坏转换表结构（我担心它可能会影响可访问性）。

标签： htmlcss

Answer 1

不使用 flex 的基本表是否足以实现您正在寻找的内容？

th, td {
  border: 1px solid red;
}

<table>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>UK</td>
    </tr>
  </tbody>
</table>