在带样式的React组件中为table、tr、th和td元素添加边框,可以通过CSS样式来实现。以下是一种常见的方法:
.table-style {
border-collapse: collapse;
}
.table-style th,
.table-style td {
border: 1px solid black;
padding: 8px;
}
import React from 'react';
import './Table.css';
const Table = () => {
return (
<div className="table-style">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
</div>
);
};
export default Table;
<div className="table-style">
用于包裹整个表格,并应用了之前定义的CSS类名。这样,表格的<th>
和<td>
元素就会应用定义的边框样式。这种方法可以为表格的每个单元格添加相同的边框样式。如果需要为特定的表格元素添加不同的边框样式,可以在CSS中使用更具体的选择器或类名来实现。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云