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";