Question

我遇到的问题是做一些非常简单的事情......当悬停时，向引导表行（tr）添加1px顶部和底部边框。该表是条带化的，但我不认为这很重要（不使用bootstrap的table-striped类，但我检查过它也发生在使用它时）。这是一个Angular应用程序。

问题：未显示1px顶部边框，因为前一行未悬停，其底部边框为1px，与悬停行重叠。显示前一行的边框，而不显示悬停行的边框。如果我将悬停边框更改为2px，则会显示（1px位于上一行的下边框后面，显示第二个px）。

我可以使用“上一个兄弟”选择器（+选择器的对面），如果有任何...删除前一行的下边框;

如何为悬停的表格行提供1px顶部和底部边框？

Fiddle

Answer 1

只要摆脱所有这些边框底部，它看起来很好：

tr td {
    border-bottom: 0 !important;
}

tr:hover td {
    border: solid 1px red !important;
}

https://jsfiddle.net/asbjsvtu/

Answer 2

我不知道我是否理解你，如果你弄清楚它会很好。但是，如果我找到了你，你可以添加padding-top: 1px;和padding-bottom: 1px（或者如果它已经有一个填充，只需在顶部和底部添加1px）到表格行，当它为＆＃39徘徊。

Answer 3

这可能有所帮助。

    public class DictionaryAdvancedTest {
protected static String[] entries = new String[26 * 26];

protected static void fill() {
    // Insert 26 * 26 entries
    for (int i = 0; i < 26; i++)
        for (int j = 0; j < 26; j++) {
            StringBuffer s = new StringBuffer();
            s.append((char) ((int) 'A' + i));
            s.append((char) ((int) 'A' + j));
            entries[i * 26 + j] = s.toString();
        }
} // fill method

public static void main(String[] args) {
    BSTDictionary<String, SortableString> dict1 = new BSTDictionary<String, SortableString>();
    AVLDictionary<String, SortableString> dict2 = new AVLDictionary<String, SortableString>();

    // Insert lots of entries
    fill();
    for (int i = 0; i < 26 * 26; i++) {
        int e;
        do {
            e = (int) (Math.random() * (26 * 26));
        } while (entries[e] == null);

        dict1.insert(new SortableString(entries[e]), entries[e]);
        dict2.insert(new SortableString(entries[e]), entries[e]);
        entries[e] = null;
    }

    // print the two dictionaries
    dict1.printTree();
    dict2.printTree();
    // print the depth
    System.out.println("The initial BST tree has a maximum depth of "
            + dict1.depth());
    System.out.println("The initial AVL tree has a maximum depth of "
            + dict2.depth());

    // Delete half the entries
    fill();
    for (int i = 0; i < 13 * 26; i++) {
        int e;
        do {
            e = (int) (Math.random() * (26 * 26));
        } while (entries[e] == null);

        dict1.delete(new SortableString(entries[e]));
        dict2.delete(new SortableString(entries[e]));
    }

    System.out
            .println("After deletes, the BST tree has a maximum depth of "
                    + dict1.depth());
    System.out
            .println("After deletes, the AVL tree has a maximum depth of "
                    + dict2.depth());

    // Add a quarter the entries
    fill();
    for (int i = 0; i < 6 * 26; i++) {
        int e;
        do {
            e = (int) (Math.random() * (26 * 26));
        } while (entries[e] == null);

        dict1.insert(new SortableString(entries[e]), entries[e]);
        dict2.insert(new SortableString(entries[e]), entries[e]);
    }

    System.out
            .println("After insertions, the BST tree has a maximum depth of "
                    + dict1.depth());
    System.out
            .println("After insertions, the AVL tree has a maximum depth of "
                    + dict2.depth());

    // Search for a few random entries
    fill();
    for (int i = 0; i < 6; i++) {
        int e;
        do {
            e = (int) (Math.random() * (26 * 26));
        } while (entries[e] == null);

        System.out.print("Searching for " + entries[e] + ": ");
        if (dict1.search(new SortableString(entries[e])) == null) {
            System.out.print("Not found in Dict1, ");
        } else {
            System.out.print("Found in Dict1, ");
        }
        if (dict2.search(new SortableString(entries[e])) == null) {
            System.out.println("not found in Dict2.");
        } else {
            System.out.println("found in Dict2.");
        }
    }
}}

.table tr:hover td {
  border-top: 1px solid red !important;
  border-bottom: 1px solid red !important;
}
.table thead tr th {
  border: none !important;
}
.table tbody:last-child {
  border-bottom: 1px solid #ddd;
}

Bootstrap条纹表 - 行边框与最近的行重叠

3 个答案: