我希望我能夠從「嵌套」（不知道這是否是適當的術語）中刪除表格邊框來獲得一些幫助。刪除嵌套tr的邊框

這是我到目前爲止有：

<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中，它似乎並沒有修復它。

來源

2014-09-29 NickN

好，這是無效的HTML。「」具有以下允許的父元素：「A」

「，」「，」「或」「元素。（參考：https：//developer.mozilla.org/en-US/docs/Web/HTML/Element/tr） – 2014-09-29 21:14:07

正如@DavidThomas指出的，你不能直接在'

'中嵌套'' - 我可以甚至不會預測瀏覽器會怎樣。首先修復您的HTML，然後修復CSS。 – 2014-09-29 21:16:12

好吧，我修復了代碼，並將崩潰添加到了我的css中，但似乎沒有修復它。 – NickN 2014-09-29 21:33:50

回答

我給你寫了一個小的功能，將附加的顯示功能，有一個按鈕，每個兄弟行，但我想你應該先做更多的教程，因爲你有許多錯誤只會造成更多的混亂。

嘗試做一些關於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>

來源

2014-09-29 22:00:50

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

table { 
    border-collapse: collapse; 
}

JSFiddle

來源

2014-09-29 21:14:39 APAD1

相關問題