How can I get rid of this line? Or atleast format it?-CodePudding

I must be missing something very small. I have an html table with Bootstrap5 css. I can't get the formatting right. How can I get rid of this black line or format it and the black text to make it to be less bold?

Table Header Row

Here's the table header code:

<table id="submissionTable" >
        <thead>
            <tr>
                <th >Item Description</th>
                <th >Quantity Used</th>
                <th >Sold</th>
                <th ></th>
            </tr>
        </thead>

I'm using bootstrap.min.js and my own custom.js right below it in my <head>.

Here's my custom css

tbody, td, tfoot, th, thead, tr {
border-style: none;

}

CodePudding user response：

It was in my attempt to add the snippet, which I found the answer. Snippet only allows 30000 lines of text, so I was reducing what was actually needed it the bootstrap.css and by process of elimination it ended being this line:

.table > :not(:first-child) {
    border-top: 2px solid currentColor
}

Changed it to this and now the line is gone

.table > :not(:first-child) {
    border-top: none
}

CodePudding user response：

I couldn't replicate the black line in the photo, but to change the text weight and style you can do this:

thead th {
  font-weight: normal;
}

It is probably better to give the headings their own class and refer to it in the CSS like this:

<th >Item Description</th>


.itemtitle {
  font-weight: normal;
}