CSS樣式簡(jiǎn)單實(shí)現(xiàn)Table沒有外邊框只有內(nèi)邊框
發(fā)布時(shí)間：2014-06-13 10:15:56 作者：佚名 
我要評(píng)論
我要評(píng)論Table默認(rèn)是有外邊框，有內(nèi)邊框的，那么如何通過(guò)css樣式簡(jiǎn)單實(shí)現(xiàn)Table沒有外邊框，只有內(nèi)邊框呢？下面有個(gè)不錯(cuò)的示例，大家可以看看
效果圖：
實(shí)現(xiàn)方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
border-collapse: collapse;
border: 0px solid #999;
}
table td {
border-top: 0;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 0;
}
table tr.lastrow td {
border-bottom: 0;
}
table tr td.lastCol {
border-right: 0;
}
</style>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>籍貫</td>
<td>出生年月</td>
<td>學(xué)歷</td>
<td class="lastCol">外語(yǔ)程度</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td class="lastCol">666</td>
</tr>
<tr class="lastrow">
<td>11122</td>
<td>222111</td>
<td>333444</td>
<td>444555</td>
<td>555555</td>
<td class="lastCol">666777</td>
</tr>
</table>
</body>
</html>
測(cè)試通過(guò)！
實(shí)現(xiàn)方法：
復(fù)制代碼
代碼如下:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
border-collapse: collapse;
border: 0px solid #999;
}
table td {
border-top: 0;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 0;
}
table tr.lastrow td {
border-bottom: 0;
}
table tr td.lastCol {
border-right: 0;
}
</style>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>籍貫</td>
<td>出生年月</td>
<td>學(xué)歷</td>
<td class="lastCol">外語(yǔ)程度</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td class="lastCol">666</td>
</tr>
<tr class="lastrow">
<td>11122</td>
<td>222111</td>
<td>333444</td>
<td>444555</td>
<td>555555</td>
<td class="lastCol">666777</td>
</tr>
</table>
</body>
</html>
測(cè)試通過(guò)！
相關(guān)文章
Dreamweaver中怎么讓html網(wǎng)頁(yè)中的table邊框細(xì)線顯示?
Dreamweaver中怎么讓html網(wǎng)頁(yè)中的table邊框細(xì)線顯示？Dreamweaver中插入表格默認(rèn)是寬邊框的，看上去很難看，該怎么將邊框設(shè)置成細(xì)線呢？請(qǐng)看下文詳細(xì)介紹，需要的朋友可以2016-03-10一個(gè)屬性border-collapse解決Table的邊框問(wèn)題
表格的邊框算是頁(yè)面制作中最頭痛的，帶邊線的表格在之前非常討厭做，不過(guò)今天終于解決了這個(gè)問(wèn)題，下面將示例與大家分享下2014-03-26- 在默認(rèn)的情況下，我們的CSS將Table的邊框清除掉了，下面與大家分享下CSS控制Table內(nèi)外邊框、顏色、大小的樣式，想學(xué)習(xí)的朋友可以參考下2013-08-01
css讓table不顯示邊框的代碼在火狐和谷歌瀏覽器中無(wú)效
在css中已經(jīng)寫好了使table不顯示邊框的代碼，在ie瀏覽器中顯示正常，但是在火狐和谷歌瀏覽器中顯示不正常，table的每個(gè)邊框都顯示了出來(lái)，因?yàn)闉g覽器不同帶來(lái)的麻煩可是不2013-06-26HTML table表格邊框的控制詳細(xì)說(shuō)明
表格邊框的顯示與隱藏，是可以用frame參數(shù)來(lái)控制的。請(qǐng)注意它只控制表格的邊框圖，而不影晌單元格。2011-04-01用CSS設(shè)置表格Table的細(xì)邊框的比較好用的方法
大家經(jīng)常會(huì)發(fā)現(xiàn)Table的BORDER設(shè)置為1，得到的邊框卻不是想要的1個(gè)像素的細(xì)邊框，于是很多人去想方設(shè)法做出細(xì)邊框的效果。2010-06-23- 表格邊框的處理是CSS網(wǎng)頁(yè)布局中經(jīng)常會(huì)遇到的內(nèi)容，在webjx.com中也有過(guò)相關(guān)的介紹，除了將表格作為一個(gè)整體進(jìn)行定義，您也可以將表格邊框的四個(gè)部分分別進(jìn)行定義，包括頂部2010-01-23
- 前面學(xué)了網(wǎng)頁(yè)表格中的單元格線條的設(shè)置方法,今天學(xué)習(xí)網(wǎng)頁(yè)表格的邊框線的設(shè)置方法。 ------------------------------------------------------------------------------2008-10-17
- 網(wǎng)頁(yè)表格表框制作技巧。 -------------------------------------------------------------------------------- 表格邊框的顯示與隱藏，是可以用frame參數(shù)來(lái)控制的。請(qǐng)2008-10-17
- 這篇文章主要介紹了Table顯示你要顯示的邊框代碼的相關(guān)資料,需要的朋友可以參考下2016-05-03