把table外的div定位到td里面

把table外的div定位到td里面,第1张

你这种写法,只有用JS来计算定位。因为你的DIV放在table外面,CSS是没有办法控制的,如果你想纯CSS实现这个效果,你只在把DIV写到td里面,然后给td相对定位,在给div绝对定,这样才能实现你说的效果。

<table是<tr的上层标签
<tr必须在一个<table</table里面,它不能单独使用,相当于<table的属性标签
<table标示一个表格,<tr标示这个表格中间的一个行
<td标示行中的一个列,需要嵌套在<tr</tr中间
具体格式是:(两行两列)<table<tr<td</td
<td</td</tr</teble<th和<td一样,也是需要嵌套在<tr当中的,<tr嵌套在<table当中
<table</table 用于定义一个表格开始和结束
<th</th 定义表头单元格。表格中的文字将以粗体显示(<TH与<TD同样是标示一个储存格,唯一不同的是<TH所标示的储存格中的文字是以粗体出现,即可以这样看:
<th文字</th=<td<b文字</b</td),
在表格中也可以不用此标签,<th标签必须放在<tr标签内
<tr</tr 定义一行标签,一组行标签内可以建立多组由<td或<th标签所定义的单元格
<td</td 定义单元格标签,一组<td标签将将建立一个单元格,<td标签必须放在<tr标签内
。<th为表格标题,属性summar为摘要,<caption标签为首部说明,<thead标签为表格头部,<tbody标签为表格主体内容,<tfoot标签为表格尾部。
其中还可以使用scope 可用于取代headers属性,标记含有表头信息的单元格,其中各数值的内容如下:
 row 指示当前单元格,为包含当前单元格的行提供相关的表头信息。
 col 指示当前单元格,为根据当前单元格指定的列提供相应的表头信息。
 rowgroup 指示当前单元格,为包含当前单元格的其余行组提供相关的表头信息。
 colgroup 指示当前单元格,为根据当前单元格指定的其余列组提供相应的表头信息。
abbr 用于定义表头单元格中的缩写名,如果没有定义该属性,则将默认单元格内容为节略形式。
标准表格模型<table<caption</caption<thead<tr<th</th</tr</thead<tbody<tr<td</td</tr</tbody<tfoot<tr<td</td</tr</tfoot</table相关:<th不光是粗体,还是居中的
<caption也是居中的,而且如果table有border的话则caption不在border之内

jquery 一个table中定位到某一行的方法如下:

jquery使用css3选择器“:nth-child(n)”可以快速选择具有一定规律排列的元素,:nth-child(n) 用于匹配属于其父元素的第 n 个子元素,其中n 可以是数字、关键词或公式。注意:

此过滤器的序号是从1开始的

需要IE8以上浏览器支持

下面实例演示——为table的第1,4,7,行添加背景色变色:

1、HTML结构

<table id = "test">
<tr><td>1</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>2</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>3</td><td>7</td><td>8</td><td>9</td></tr>
<tr><td>4</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>5</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>6</td><td>7</td><td>8</td><td>9</td></tr>
<tr><td>7</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>8</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>9</td><td>7</td><td>8</td><td>9</td></tr>
</table>
<input type='button' value='设置'/>

2、jquery代码

$(function(){
$("input[type='button']")click(function() {
$("table#test tr:nth-child(3n+1)")css("background","#229922")
});
});

3、效果演示

你有没有把DIV的长度和宽度设定死。如果设定死好像回出问题。
对了长,宽,不要用比率。
还有DIV里面有没有其他元素。如果有记得处理。
建议你做一个分业处理。这样可以把表格的数据合理化。不会造成表格的变形。
AJAX返回的数据越多,加载越慢,客户体验度不够。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/13216671.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-06-21
下一篇 2023-06-21

发表评论

登录后才能评论

评论列表(0条)

保存