In an attempt to customize the appearance of a Bootstrap component, I am creating my own stylesheet and importing it into my xyz.js file. Here is the setup:
Xyz.js
import React, {Component} from 'react';
import axios from 'axios';
import qs from 'qs';
import '../css/company.css'
export default class Xyz extends Component{
constructor(props){
.....
}
render(){
return(
<div className="container" style={{float: "left"}}>
<table className = "table">
<tbody>
<tr>
<td>{this.props.index + 1}</td>
<td>{this.props.company.name}</td>
<td>{this.props.company.type}</td>
</tr>
</tbody>
</table>
</div>
)
}
}
// I am trying to set border-top of <td> to 0px which is set to 1px
//by default by bootstrap.css but I am not able to do so
xyz.css
td {
border-top-width: 0px;
height: 2px;
}
I am trying to customize the border-top property of the 'td' tag to 0px, which is initially set to 1px by the bootstrap.css. However, I seem to be encountering difficulties in achieving this.