React 组件中的 HTML 表格行没有响应我的 CSS 样式以限制内容的高度

Question

Codesandbox link我的应用程序中有一个组件，我要在其中使用 Html 表。但我现在遇到的问题是我需要将行的高度和宽度限制为特定的固定大小。我尝试在行上应用高度和溢出，但它不起作用。这里

附上codeandbox链接

反应组件行 (TR) 中的 HTML 表格不响应 CSS 样式以限制内容的高度

是我在下面所做的。

App.css

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>  bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj 
    bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj 
    bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj 
    bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj 
    bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj 
    </td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
</table>




    </div>
  );
}

样式.css

/* .App {
  font-family: sans-serif;
  text-align: center;
} */

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
  height: 20px;
  overflow: hidden;
}

#customers tr:hover {
  background-color: #ddd;
}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04aa6d;
  color: white;
}

Answer 1

我已经创建了一个解决方案。检查这是否适合您。我为表 td 创建了 max-width 并添加了 thead 和 tbody 以保证语义正确。

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
  height: 20px;
  overflow: hidden;
}

#customers tr:hover {
  background-color: #ddd;
}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04aa6d;
  color: white;
}

tbody tr td {
  max-width: 100px;
}
tbody tr td div {
  height: 50px;
  overflow-y: scroll;
}

<div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <table id="customers">
  <thead>
<tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
</thead>
  <tbody>
  <tr>
    <td>  <div>
    bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj 
    bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj 
    bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj 
    bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj 
    bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj 
    </div>
    </td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
  </tbody>
</table>




    </div>