javascript - React 表中的边框重绘不匹配

Question

我是 React 和 CSS 的新手，所以我决定制作一个计算器网络应用程序。除边界外，一切都按预期工作。有时当我选中或取消选中操作时，行之间的边界不会跨列对齐。然后，他们可以在点击更多次后自行修复。更奇怪的是，我在 Firefox 中测试时没有遇到这个问题。我在 CSS 文件中使用了 border-collapse。我在下面包含了表格代码和样式的核心。感谢您的帮助!

索引.css

#output {
  font-size: 1.5em;
}

#result {
  border:4px solid #000;
  border-collapse: collapse;
}

#result td {
  border:1px solid #000;
}

#result th {
  border:1px solid #000;
  border-bottom:2px solid #000;
  padding: 10px;
}

#result tr td {
  padding: 4px;
  padding-left: 10px;
  width: 0;
  white-space: nowrap;
}

索引.js

function Output(props) {
  const tableData = [];
  const n1 = parseInt(props.num1);
  const n2 = parseInt(props.num2);
  if (props.doAdd)  tableData.push({key: 'addRow', op: 'Addition',       num: add(n1, n2)});
  if (props.doSub)  tableData.push({key: 'subRow', op: 'Subtraction',    num: subtract(n1, n2)});
  if (props.doMul)  tableData.push({key: 'mulRow', op: 'Multiplication', num: multiply(n1, n2)});
  if (props.doDiv)  tableData.push({key: 'divRow', op: 'Division',       num: divide(n1, n2)});

  return (
    <div id='output'>
      <ResultTable data={tableData} />
    </div>
  );
}

function ResultTable(props) {
  let rows = props.data.map(row => {
    return <ResultRow key={row.key} op={row.op} num={row.num} />
  });

  return (
    <table id='result'>
      <thead>{<ResultHead />}</thead>
      <tbody>{rows}</tbody>
    </table>
  );
}

function ResultHead() {
  return (
    <tr>
      <th>Operation</th>
      <th>Result</th>
    </tr>
  );
}

function ResultRow(props) {
  return (
    <tr>
      <td>{props.op}</td>
      <td>{props.num}</td>
    </tr>
  );
}

Answer 1

这会起作用

删除 border-collapse: collapse; 并改为添加 border-spacing: 0;。

#result {
      border:4px solid #000;
      border-spacing: 0;
    }

关于 stackblitz 的工作示例:https://stackblitz.com/edit/react-aqyy9r