Css 设置已创建表格的样式（分数矩阵）

只是学习如何做出反应，并希望能够做出这样的事情：

我到目前为止：

类ScoreMatrixRow扩展了React.Component{
render（）{
设rown=this.props.RowNumber；
设colN=this.props.Columns；
让因子=this.props.factor；
变量单元格=\范围（1，colN+1）.map（（i）=>{
设cellVal=（i）*rown*因子；
let style={backgroundColor:'gold'}；
if（cellValthis.props.HighLimit）{
风格={backgroundColor:'indianred'}；
} 
让key=`R${rown}C${i}`；
if（key==this.props.ScoreLocation）{
样式={…样式，颜色：“蓝色”}；
}
返回{cellVal}
});
返回(
{cells}
);
}
}
类ScoreMatrix扩展了React.Component{
render（）{
让rows=uz.range（1，this.props.rows+1）.reverse（）；
返回(
{rows.map（r=>
)}
);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
正文{
填充：5px
}
运输署{
填充：15px
}

若要在所选数字周围获得一个更大的圆圈，请使用非零填充（类似于
填充：0.4em 0.7em；边框半径：1em；背景：蓝色；
）。对于淡入淡出过渡，只需添加
过渡：所有0.5s轻松度
或类似项即可。@sebastian_k谢谢。我更新了这个问题。看起来你已经完成了你要做的事情——你还需要什么？你是对的。我无法将问题设置为“已回答”，因为没有回答帖子，只有评论。如果您将您的命令作为答案发布，那么我会将其标记为已解决。我仍然希望有人有一个boostrap或其他CSS技巧，使它看起来更时尚，在选定的数字周围有一个更大的圆圈，将其用非零填充（类似于
填充：0.4em 0.7em；边框半径：1em；背景：蓝色；
）的跨距进行包装。对于淡入淡出过渡，只需添加
过渡：所有0.5s轻松度
或类似项即可。@sebastian_k谢谢。我更新了这个问题。看起来你已经完成了你要做的事情——你还需要什么？你是对的。我无法将问题设置为“已回答”，因为没有回答帖子，只有评论。如果你把你的命令作为一个答案，那么我会把它标记为已解决。我仍然希望有人有一个boostrap或其他CSS技巧，使它看起来更时尚