csstd背景色
⑴ td中加一個色塊背景或圖片背景, 要求按百分比橫向填滿, 用背景的原因是還要寫字, css如何寫
td好像不用css就能實現這些
<td width="100" height="100" bgcolor="#aaaaad" background="./image/001.jpg">123</td>
bgcolor是背景顏色
background是背景圖片
你只要設置好td的寬度和高度。他會自動平鋪背景的
⑵ table tr設置background-color 無效 css朋友幫忙看下
應該是被其他的背景覆蓋了。
我們一般不支持給tr設置背景,很容易被td的背景覆蓋,而且td不會繼承tr的背景色,只有td的背景是透明的情況下,才會看到tr的背景色。
曾經做過測試發現,如果將一張圖片設置為tr的背景(未平鋪只顯示一張,靠左),實際顯示卻是每個td中都有一張背景圖。
⑶ 在td里邊必須用css設置背景圖片怎麼寫
首先給td 加一個class 或是 id 例如 <td class="bg_td"></td>
CSS部分
.bg_td{background:url(圖片位置內) no-repeat center center} 屬性自己修改。容
⑷ 如何用css控制滑鼠浮在td上面,td的背景變色,急急急!!
先別看代碼多.其實起作用的就那麼幾段代碼. 你復制以下代碼執行看到效果後就一目瞭然了
<!-- 以下是css實現 -->
<style type="text/css">
a { display:block; height:100%;}
a:link { color:#000; text-decoration:none;}
a:visited { color:#000; text-decoration:none;}
a:hover { color:#f60; text-decoration:none; background-color:#FF0000;}
</style>
<body>
<table border="1" cellspacing="0" cellpadding="0" align="center">
<tr height="50">
<td width="50" height="50"><a href="javascript:void(0);">1</a></td>
<td width="50" height="50"><a href="javascript:void(0);">2</a></td>
<td width="50" height="50"><a href="javascript:void(0);">3</a></td>
</tr>
<tr height="50">
<td height="50"><a href="javascript:void(0);">4</a></td>
<td height="50"><a href="javascript:void(0);">5</a></td>
<td height="50"><a href="javascript:void(0);">6</a></td>
</tr>
<tr height="50">
<td height="50"><a href="javascript:void(0);">7</a></td>
<td height="50"><a href="javascript:void(0);">8</a></td>
<td height="50"><a href="javascript:void(0);">9</a></td>
</tr>
</table>
<!-- 以下是javascript實現 -->
<table border="1" cellspacing="0" cellpadding="0" align="center">
<tr height="50">
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">1</td>
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">2</td>
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">3</td>
</tr>
<tr height="50">
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">4</td>
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">5</td>
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">6</td>
</tr>
<tr height="50">
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">7</td>
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">8</td>
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">9</td>
</tr>
</table>
⑸ 兩句css給同一個表格的td標簽設置背景色誰會起作用為什麼
這里就涉及到css樣式的優先順序了。
從大的方面將,html文檔中樣式有三種定義方式。
1、外部樣式,通過link引用外部樣式文件,如<link rel="stylesheet" type="text/css" href="style.css"/>
2、內部樣式,在html文檔中定義樣式,如h3{color:green;}
3、內嵌樣式,在某個dom元素上定義style。
這三種方式的優先順序從1-3逐漸增強。
如果同時定義了好幾個樣式作用於一個元素上,則最終起作用的按照以下優先順序。
1. 內聯樣式表的權值最高 1000;
2. ID 選擇器的權值為 100
3. Class 類選擇器的權值為 10
4. HTML 標簽選擇器的權值為 1
權值越高的就優先起作用。
⑹ html table td的背景如何設置可以按照百分比顯示背景色所佔TD的比例。
你可以通過設置background-size
⑺ 如何用CSS實現td被點擊時和點擊後換背景,點擊另一個的時候,它在換回來。。 是用CSS。。。
光CSS可能實現不了這個問題,若是能實現請說明。我現在說下CSS結合JS實現。
首先我不知道你有在一個頁面里有多少個TD,所以我寫個通用的方法。希望能給你幫助。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1888/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
.td_bg{
background:#CCC;
}
.td_down{
background:#f00;
}
</style>
<script>
function mousedown(nameId,numId,total){
for(i=0;i<=total;i++){
document.getElementById(nameId+i).className = 'td_bg';
//alert(nameId+i)
}
document.getElementById(nameId+numId).className = 'td_down';
//alert(nameId+numId)
}
</script>
</head>
<body>
<div id="showdiv" style="background:#CCC;"></div>
<table width="200" border="0" cellspacing="1" cellpadding="0">
<tr>
<td id="td0" onclick="mousedown('td',0,8)" class="td_bg"></td>
<td id="td1" onclick="mousedown('td',1,8)" class="td_bg"></td>
<td id="td2" onclick="mousedown('td',2,8)" class="td_bg"></td>
</tr>
<tr>
<td id="td3" onclick="mousedown('td',3,8)" class="td_bg"></td>
<td id="td4" onclick="mousedown('td',4,8)" class="td_bg"></td>
<td id="td5" onclick="mousedown('td',5,8)" class="td_bg"></td>
</tr>
<tr>
<td id="td6" onclick="mousedown('td',6,8)" class="td_bg"></td>
<td id="td7" onclick="mousedown('td',7,8)" class="td_bg"></td>
<td id="td8" onclick="mousedown('td',8,8)" class="td_bg"></td>
</tr>
</table>
</body>
</html>
⑻ JS控制table特定tr的背景顏色
代碼如下:
<script>
//js放到table下,才能檢測到tr數組
var trs = document.getElementById("tableBox").getElementsByTagName("tr");
var trs=document.getElementById("tableBox").getElementsByTagName("tr");
$(function(){
for(var i=0;i<trs.length;i++){
trs[i].onmousedown = function(){
mousedownclick(this);
}
}
});
function mousedownclick(obj){
for(var j=0;j<trs.length;j++){
if(trs[j]==obj){
trs[j].style.background='blue';
}else{
trs[j].style.background='';
}
}
}
</script>
(8)csstd背景色擴展閱讀
js操作table的各種用法:
(1)得到table 中tbody 的內容 :$('#simple-table').find('tbody').html();
(2)點擊td時,獲取點擊的行號:
$('#simple-table tbody').on( 'click', 'td', function (e) {
normalRowIndex = $(this).parent().index(); //行號
console.log("正常工作錶行:"+normalRowIndex);
});
(3)為table追加一行:
function addNormalTR(){
$('#simple-table').find('tbody').append(trtd); //tdtd為拼接的trtd 的html內容。
}
(4) 點擊td中的元素獲取,當前行號: obj.parentNode.parentNode.rowIndex;//obj 為元素對象
⑼ css設置td的背景圖片
背景圖是不能縮放的吧,至少我是沒聽說可以。
可以直接插入圖片,只設置寬度 <img src="test.gif" width="30" />
不要設置高度,設置高度會比例失調。
⑽ js, 怎麼修改單元格<td>的css樣式比如單元格的背景顏色
不要用id直接取元素而且你的樣式寫的也不對
document.getElementById("a1").style.backgroundColor="red";