JSFiddle

Question

我希望能从“嵌套”中删除表格边框得到一些帮助（不确定这是否是正确的术语）。

这是我到目前为止所做的：

<table>
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
            <th>Three</th>
            <th>Four</th>
            <th>Five</th>
            <th>Six</th>
            <th>Seven</th>
            <th>Eight</th>
            <th>nine</th>
            <th>ten</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr class="schedule-header">
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
        </tr>
    </tbody>
</table>

这是CSS：

.schedule-header {
background: #0062a1;
color: white;
border: none;
font-weight: bold;

}

现在我得到了我想要的所有样式，除了边框：没有;风格。

基本上我的计划是在上面的表格行上点击下拉箭头时使用jquery弹出这个嵌套表格，显示相关数据。

好的，所以我修复了代码并将崩溃添加到我的CSS中，它似乎没有修复它。

Answer 1

将border-collapse: collapse;添加到表格的CSS中：

table {
  border-collapse: collapse;   
}

JSFiddle

Answer 2

我写了一个小函数，它将显示函数附加到每个有按钮的兄弟行，但我认为你应该先做一些教程，因为你有很多错误只会造成更多的混乱。

尝试在W3Schools上完成一些教程，以改进CSS，HTML和最终的JQuery。

祝你好运;）

<html>
<head>
<style>
    .more_info {
        background-color: #0062a1;
        color: white;
        font-weight: bold;
        display:none;
    }
    table {
        border-collapse: collapse;
    }
    button {
        border-radius: 50%;
        background-color: #0062a1;
        color: white;
        font-weight: bold;
    }
</style>
<script src="jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function (){
        var info_row = $(this).parent().parent().next();
        info_row.toggle("slow");
    });
});
</script>
</head>
<body>
<table>
        <thead>
            <tr>
                <th></th>
                <th>One</th>
                <th>Two</th>
                <th>Three</th>
            </tr>
        </thead>
        <tbody>
            <tr id="1">
                <td><button>i</button></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr class="more_info">
                <td></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr id="2">
                <td><button>i</button></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr class="more_info">
                <td></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

从嵌套tr中删除边框

2 个答案:

JSFiddle