Question

我相信这是（实际上所有三个）在底部以及孩子身上都具有白色细边框，这是我唯一能够做到的方法删除它们是通过应用以下CSS：

    .headerI{
border: 0 !important
}

有问题的代码正在使用带有React-bootstrap {Table}的ReactJS。有什么想法吗？

                <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

我查看了边框的来源，并将其应用于th元素有两种方式（可能更多，但我看到了两种）：

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

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

核心问题是您的样式需要比这些样式更具针对性才能应用，因为CSS优先考虑最具体的类型。

这没有影响：

.headerI {
    border-bottom: 0;
}

但是确实如此！

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

但是让我们给它起一个更好的名字，并且也去掉顶部边框。

.table th.borderless {
    border: 0;
}

<Th>在底部有一个细的白色边框，我只能用以下边框删除：0！important

1 个答案: