javascript - React 表中的边框重绘不匹配
问题描述
我是 React 和 CSS 的新手,所以我决定制作一个计算器网络应用程序。除边界外,一切都按预期工作。有时当我选中或取消选中操作时,行之间的边界不会跨列对齐。然后,他们可以在更多点击后自行修复。更奇怪的是,我在 Firefox 中测试时没有遇到这个问题。我border-collapse
在 CSS 文件中使用。我在下面包含了表格代码和样式的核心。谢谢你的帮助!
索引.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;
}
index.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>
);
}
解决方案
这将起作用
改为删除 border-collapse: collapse;
并添加。border-spacing: 0;
#result {
border:4px solid #000;
border-spacing: 0;
}
关于 stackblitz 的工作示例:https ://stackblitz.com/edit/react-aqyy9r
推荐阅读
- powershell - 用户如何注销用户的定时任务?
- x11 - 从 X11 Stream 重新创建显示输出
- ios - 在 SFSafariViewController 上跟踪触摸事件
- php - 如何循环遍历 laravel 分页器中的每个页面
- flutter - 带流的多提供者
- coq - 如何在 Coq 中打印证明对象或 Gallina 术语的全部内容?
- twig - Laravel:如果表中的两列为真,则返回一个按钮,如果不是,则不返回任何内容
- javascript - 我可以有一个事件每月重复一次到一个未确定的结束机智反应大日历吗?
- python - 使用 sqlalchemy one() 函数可以从数据库引擎返回多行吗?
- reactjs - 如何在 React Img Mapper 中预加载突出显示的区域?