1. 首頁
  2. 問答
  3. 如何從HtmlTable的一列和包含該表的部分刪除邊界？

如何從HtmlTable的一列和包含該表的部分刪除邊界？

2015-08-24 25 views
0

我需要從htmltable的最後一列刪除邊框線。我想這對錶的最後「一欄」（TD）：如何從HtmlTable的一列和包含該表的部分刪除邊界？

<td class="nobordercell">Comments</td> 

.nobordercell { 
    border: none; 
}

我也試過這個（邊界崩潰：崩潰）：

<table class="middletable" border="1"> 
    <tr> 
     . . . 
     <td name="airfaredate1Comments" id="airfaredate1Comments" class="nobordercell">Comments</td> 
    </tr> 
    . . . 

.middletable{ 
    width:99%; 
    float:left; 
    border-collapse:collapse; 
}

邊境唯一的邊緣消失是底部。我意識到這是因爲仍然顯示的邊框屬於表格，而不是td，但仍需要知道如何從HTML表格中刪除邊框，僅在td的邊框與其相交的部分（或將相交，如果td的邊界正在顯示）。

這是它的外觀現在：

enter image description here

...這是我希望它看起來：

enter image description here

來源

2015-08-24 B. Clay Shannon

+1

它看起來像你的'table'或'tr'本身不具有邊界 –

+1

你在表中定義了1的邊框。 '

'，將它改爲0應該從表格中刪除邊框。 –

+0

我想要一般的桌子上的邊框;只是不在「列」上 –

回答

1

一些簡單的CSS和安排應該幫助做訣竅，包括一個JSFiddle。此外，必須從你的HTML表標記刪除邊框：

.middletable{ 
    width:99%; 
    float:left; 
    border:none; 
    border-collapse:collapse; 
} 

.bordercell{ 
    border:1px solid black; 
} 

.nobordercell { 
    border: none; 
} 

<table class="middletable"> 
    <tr> 
     <td name="airfaredate1Comments" id="airfaredate1Comments" class="bordercell">Comments</td> 
       <td class="nobordercell">Comments</td> 
    </tr> 
     <tr> 

     <td name="airfaredate1Comments" id="airfaredate1Comments" class="bordercell">Comments</td> 
        <td class="nobordercell">Comments</td> 
    </tr> 

     <tr> 
     <td name="airfaredate1Comments" id="airfaredate1Comments" class="bordercell">Comments</td> 
        <td class="nobordercell">Comments</td> 
    </tr> 


</table>

https://jsfiddle.net/0v9vdd58/

來源

2015-08-24 20:45:56

1

你可以使用CSS3 :last-of-type選擇器。

.middletable{ 
    width:99%; 
    float:left; 
    border-collapse:collapse; 
} 

.middletable td{ 
    border:1px solid black; 
} 

.middletable td:last-of-type{ 
    border:0px; 
}

而這裏的HTML：

<table class="middletable"> 
    <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
    </tr> 
<table>

，這裏是一個的jsfiddle展示在行動代碼：http://jsfiddle.net/5pt2axd1/

來源

2015-08-24 20:54:55

相關問題

 相關問題