新聞中心
的寬度和高度'>table中如何用CSS控制>的寬度和高度
1、首先給table標(biāo)簽添加css : table-layout:fixed;這里是為了讓整個(gè)table有一個(gè)自己寬度,而不是讓table自己隨著自己內(nèi)容的大小而改變。
創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的宿城網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
2、給table標(biāo)簽,定一個(gè)寬度(如:width:500px);
3、最后給td 定一個(gè)寬度(width)就可以實(shí)現(xiàn).
原表格:
添加一下CSS:
現(xiàn)表格:
擴(kuò)展資料:
在實(shí)際需求中,經(jīng)常遇到要在table中的td中,讓用戶輸入比較長的字符串,這時(shí)就要使td的寬度能較大。
在WEB前端中,對(duì)于 表格元素中的元素td 直接設(shè)置寬度是無法生效的。要想達(dá)到給td設(shè)置寬度的目地。
表格細(xì)邊框的CSS樣式怎么設(shè)置?
指定的table為細(xì)邊框,把table放在div中即可。
一、首先新建表格,代碼如下:
table width="500" border="1"? trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td /trtr? tdnbsp;/td tdnbsp;/tdtdnbsp;/td/tr/table。
二、在table里加css樣式,代碼如下:
table width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"? tr tdnbsp;/tdtdnbsp;/td tdnbsp;/td /tr tr tdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/table。
三、單元格邊距(表格填充)(cellpadding) -- 代表單元格外面的一個(gè)距離,用于隔開單元格與單元格空間。單元格間距(表格間距)(cellspacing) -- 代表表格邊框與單元格補(bǔ)白的距離,也是單元格補(bǔ)白之間的距離,border-collapse:collapse表示表格的兩邊框合并為一條即可。
css樣式 table td id
直接用#table tr td:hover{}就可以了,不過IE6以下只支持a:hover,不支持其他元素的偽類。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title無標(biāo)題文檔/title
style
#table
{
width:300px;
height:200px;
}
#table td
{
width:100px;
height:100px;
background-color:Red;
}
#table tr td:hover{
background-color:blue;
}
/style
/head
body
table id="table"
tr
td111/td
td222/td
td333/td
/tr
tr
td444/td
td555/td
td666/td
/tr
/table
/body
/html
怎么樣把table表格使用css樣式居中顯示
1、普通居中。
align="center"
table?align="center"
tr
td商品名稱/td
td商品價(jià)格/td
td商品描述/td
td購買/td
/tr
/table
2、css樣式居中。
margin:0 auto
style?type="text/css"
table1{
margin:0?auto;/*?自動(dòng)居中,不論王爺?shù)拇笮?*/
border:1;/*?邊框粗度?*/
width:80%;/*?寬度只占當(dāng)前頁面的80%?*/
}
/style
css table樣式?
CSS(Cascading Style Sheet,可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”)是一組格式設(shè)置規(guī)則,用于控制Web頁面的外觀。通過使用CSS樣式設(shè)置頁面的格式,可將頁面的內(nèi)容與表現(xiàn)形式分離。頁面內(nèi)容存放在HTML文檔中,而用于定義表現(xiàn)形式的CSS規(guī)則則存放在另一個(gè)文件中或HTML文檔的某一部分,通常為文件頭部分。將內(nèi)容與表現(xiàn)形式分離,不僅可使維護(hù)站點(diǎn)的外觀更加容易,而且還可以使HTML文檔代碼更加簡練,縮短瀏覽器的加載時(shí)間。如:div id=topulli神馬都是浮云/li/ul/divtable就是tabletrtd/td/tr/table這種的table與DIV可以相互交替使用!
怎樣用CSS設(shè)置table第一列樣式
1上邊框?qū)挾纫韵率且闷危?/p>
語法: border-top-width: 值
允許值: thin | medium | thick | 長度
初始值: medium
適用于: 所有對(duì)象
向下兼容: 否
上邊框?qū)挾葘傩杂糜谥付ㄒ粋€(gè)元素上邊框的寬度。值可以是三個(gè)關(guān)鍵字其中的一個(gè),都不受字體大小或長度的影響,可以用于實(shí)現(xiàn)成比例的寬度。
不允許使用負(fù)值。也可以用在上邊框、邊框的寬度或邊框的屬性略寫。
2.右邊框?qū)挾纫韵率且闷危?/p>
語法: border-right-width: 值
允許值: thin | medium | thick | 長度
初始值: medium
適用于: 所有對(duì)象
向下兼容: 否
右邊框?qū)挾葘傩杂糜谥付ㄔ氐挠疫吙虻膶挾?。值可以是三個(gè)關(guān)鍵字其中的一個(gè),都不受字體大小或長度的影響,可以用于實(shí)現(xiàn)成比例的寬度。
不允許使用負(fù)值。也可以用在右邊框、邊框的寬度或邊框的屬性略寫。
3.下邊框?qū)挾纫韵率且闷危?/p>
語法: border-bottom-width: 值
允許值: thin | medium | thick | 長度
初始值: medium
適用于: 所有對(duì)象
向下兼容: 否
下邊框?qū)挾葘傩杂糜谥付ㄔ氐南逻吙虻膶挾取V悼梢允侨齻€(gè)關(guān)鍵字其中的一個(gè),都不受字體大小或長度的影響,可以用于實(shí)現(xiàn)成比例的寬度。
不允許使用負(fù)值。也可以用在下邊框、邊框的寬度或邊框的屬性略寫。
4.左邊框?qū)挾纫韵率且闷危?/p>
語法: border-left-width: 值
允許值: thin | medium | thick | 長度
初始值: medium
適用于: 所有對(duì)象
向下兼容: 否
左邊框?qū)挾葘傩杂糜谥付ㄔ氐淖筮吙虻膶挾?。值可以是三個(gè)關(guān)鍵字其中的一個(gè),都不受字體大小或長度的影響,可以用于實(shí)現(xiàn)成比例的寬度。
不允許使用負(fù)值。也可以用在左邊框、邊框的寬度或邊框的屬性略寫。
5.邊框?qū)挾纫韵率且闷危?/p>
語法: border-width: 值
允許值: [ thin | medium | thick | 長度 ]{1,4}
初始值: 未定義
適用于: 所有對(duì)象
向下兼容: 否
邊框?qū)挾葘傩杂靡坏剿膫€(gè)值來設(shè)置元素的邊界,值是一個(gè)關(guān)鍵字或長度。不允許使用負(fù)值長度。如果四個(gè)值都給出了,它們分別應(yīng)用于上、右、下和左邊框的式樣。如果給出一個(gè)值,它將被運(yùn)用到各邊上。如果兩個(gè)或三個(gè)值給出了,省略了的值與對(duì)邊相等。 這個(gè)屬性是上邊框?qū)挾?、右邊框?qū)挾?、下邊框?qū)挾群妥筮吙驅(qū)挾葘傩缘穆詫憽?/p>
也可以使用略寫的邊框?qū)傩浴?/p>
6.邊框顏色以下是引用片段:
語法: border-color: 值
允許值: 顏色{1,4}
初始值: 顏色屬性的值
適用于: 所有對(duì)象
向下兼容: 否
邊框顏色屬性設(shè)置一個(gè)元素的邊框顏色??梢允褂靡坏剿膫€(gè)關(guān)鍵字。如果四個(gè)值都給出了,它們分別應(yīng)用于上、右、下和左邊框的式樣。如果給出一個(gè)值,它將被運(yùn)用到各邊上。如果兩個(gè)或三個(gè)值給出了,省略了的值與對(duì)邊相等。
也可以使用略寫的邊框?qū)傩浴?/p>
7.邊框樣式以下是引用片段:
語法: border-style: 值
允許值: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
初始值: none
適用于: 所有對(duì)象
向下兼容: 否
邊框樣式屬性用于設(shè)置一個(gè)元素邊框的樣式。這個(gè)屬性必須用于指定可見的邊框??梢允褂靡坏剿膫€(gè)關(guān)鍵字。如果四個(gè)值都給出了,它們分別應(yīng)用于上、右、下和左邊框的式樣。如果給出一個(gè)值,它將被運(yùn)用到各邊上。
如果兩個(gè)或三個(gè)值給出了,省略了的值與對(duì)邊相等。也可以使用略寫的邊框?qū)傩浴?/p>
以下是引用片段:none:無樣式; dotted:點(diǎn)線; dashed:虛線; solid:實(shí)線; double:雙線; groove:槽線; ridge:脊線; inset:內(nèi)凹; outset:外凸
8.上邊框以下是引用片段:
語法: border-top: 值
允許值: 上邊框?qū)挾?|| 邊框式樣 || 顏色
初始值: 未定義
適用于: 所有對(duì)象
向下兼容: 否
上邊框?qū)傩允且粋€(gè)用于設(shè)置一個(gè)元素上邊框的寬度、式樣和顏色的略寫。
注意只能給出一個(gè)邊框式樣。也可以使用略寫的邊框?qū)傩浴?/p>
9.右邊框
語法: border-right: 值
允許值: 右邊框?qū)挾?|| 邊框式樣 || 顏色
初始值: 未定義
適用于: 所有對(duì)象
向下兼容: 否
右邊框?qū)傩允且粋€(gè)用于設(shè)置一個(gè)元素右邊框的寬度、式樣、和顏色的略寫。
注意只能給出一個(gè)邊框式樣。也可以使用略寫的邊框?qū)傩浴?/p>
10.下邊框以下是引用片段:
語法: border-bottom: 值
允許值: 下邊框?qū)挾?|| 邊框式樣 || 顏色
初始值: 未定義
適用于: 所有對(duì)象
向下兼容: 否
下邊框?qū)傩允且粋€(gè)用于設(shè)置一個(gè)元素的下邊框的寬度、式樣和顏色的略寫。
注意只能給出一個(gè)邊框式樣。也可以使用略寫的邊框?qū)傩浴?/p>
11.左邊框以下是引用片段:
語法: border-left: 值
允許值: 左邊框?qū)挾?|| 邊框式樣 || 顏色
初始值: 未定義
適用于: 所有對(duì)象
向下兼容: 否
左邊框?qū)傩允且粋€(gè)用于設(shè)置一個(gè)元素左邊框的寬度、式樣和顏色的略寫。注意只能給出一個(gè)邊框式樣。也可以使用略寫的邊框?qū)傩浴?下面的細(xì)線表格是用cellspacing來實(shí)現(xiàn)的,用表格的背景色做為邊框的顏色。
不方便的是每一行都要再設(shè)置一個(gè)背景色。
網(wǎng)站名稱:包含css表格樣式table的詞條
分享路徑:http://fisionsoft.com.cn/article/dsgjods.html