<Th> has a thin white border on the bottom that I can only remove with border: 0 !important

Question

I believe it's the <th className="headerI/II/III> (all three actually) have this thin white border at the bottom of the th as well as on the children too. The only way I've been able to remove them is by applying this css:

    .headerI{
border: 0 !important
}

The code in question is using ReactJS with react-bootstrap {Table}. Any ideas?

                <Table id="tabularInputs">
                <thead id="tableHeader" className="col-lg-8 col-lg-offset-2">
                    <tr className="col-lg-12" text-left>
                        <th className="headerI">
                            <DropdownButton id="dropdownFormat" title={format[0].SD}>
                                <Dropdown.Item
                                    onClick={handleFormat}
                                    name="DD"
                                    href="#/action-1"
                                >
                                    {format[0].DD}
                                </Dropdown.Item>
                                <Dropdown.Item
                                    onClick={handleFormat}
                                    name="DDM"
                                    href="#/action-2"
                                >
                                    {format[0].DDM}
                                </Dropdown.Item>
                                <Dropdown.Item
                                    onClick={handleFormat}
                                    name="DMS"
                                    href="#/action-3"
                                >
                                    {format[0].DMS}
                                </Dropdown.Item>
                            </DropdownButton>
                        </th>
                        <th className="headerII">Latitude</th>
                        <th className="headerIII">Longitude</th>
                    </tr>
                </thead>
                <TableBody />
            </Table>

Answer 1

I had a look at where the border is coming from and it's applied to the th element is two ways (possibly more but I saw two):

.table thead th {
    border-bottom: 2px solid #dee2e6;
}

.table td, .table th {
    border-top: 1px solid #dee2e6;
}

The core issue is that your styles need to be more specifically targeted than those styles in order to apply, since CSS gives precedence to the most specific types.

This doesn't have an impact:

.headerI {
    border-bottom: 0;
}

But this does!

.table th.headerI {
    border-bottom: 0;
}

But let's give it a better name, and remove the top border too.

.table th.borderless {
    border: 0;
}