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

Posted 2023-03-06

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

【英文标题】：HTML Table row in React component is not responding to my css styles in order to limit the height of the content

【发布时间】：2021-12-08 12:01:34

【问题描述】：

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;

【问题讨论】：

你能创建一个可运行的minimal reproducible example 来演示这个问题吗？哪个特定样式规则未按预期应用于哪个特定元素？

我刚刚添加了一个codesandox链接@David我需要第一行来设置特定的宽度和高度，在这种情况下修复所有行...可能会通过溢出隐藏所有其他内容

那个沙箱链接没有显示 HTML 表格。

这是一个反应组件中的 Html 表@David

【参考方案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>

【讨论】：

是的。请告诉我