我希望我能得到一些帮助，从“嵌套”中删除表格边框(不确定这是否是正确的术语)。
这是我目前所拥有的:
<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 中，但它似乎并没有修复它。
最佳答案
我给你写了一个小函数，它将显示函数附加到每个有按钮的同级行，但我认为你应该先做更多的教程，因为你有很多错误只会造成更多的困惑。
尝试在 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>
关于html - 从嵌套的 tr 中删除边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26108934/