23,404
社区成员
发帖
与我相关
我的任务
分享漂亮的table--备忘
<html>
<head>
<style type="text/css">
/* CSS Document */
body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}
a {
color: #c75f3e;
}
#mytable {
width: 700px;
padding: 0;
margin: 0;
}
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(images/bullet2.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
</style>
</head>
<body>
<table id="mytable" cellspacing=="0" cellpadding="0">
<tr>
<th scope="col" abbr="Configurations" class="nobg">Configurations</th>
<th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
<th scope="col" abbr="Dual 2">Dual 2GHz</th>
</tr>
<tr>
<th scope="row" abbr="Model" class="spec">lipeng</th>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
</tr>
<tr>
<th scope="row" abbr="G5 Processor" class="specalt">mapabc</th>
<td class="alt">Dual 1.8GHz PowerPC G5</td>
<td class="alt">Dual 2GHz PowerPC G5</td>
</tr>
</table>
</body>
</html>
...全文
请发表友善的回复…
发表回复
luozhangwen 2010-08-23
- 打赏
- 举报
可以拖动的table
<html>
<head>
</head>
<SCRIPT LANGUAGE="JavaScript">
var currentMoveObj = null; //当前拖动对象
var relLeft; //鼠标按下位置相对对象位置
var relTop;
function f_mdown(obj)
{
currentMoveObj = obj; //当对象被按下时，记录该对象
currentMoveObj.style.position = "absolute";
//alert(event.x);
relLeft = event.x - currentMoveObj.style.pixelLeft;
relTop = event.y - currentMoveObj.style.pixelTop;
}
window.document.onmouseup = function()
{
currentMoveObj = null; //当鼠标释放时同时释放拖动对象
}
function f_move(obj)
{
if(currentMoveObj != null)
{
currentMoveObj.style.pixelLeft=event.x-relLeft;
currentMoveObj.style.pixelTop=event.y-relTop;
}
}
</SCRIPT>
<BODY>
<TABLE width="100" border=1 onselectstart="return false" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
<TR>
<TD bgcolor="#CCCCCC" align="center" style="cursor:move">title1</TD>
</TR>
<TR>
<TD align="center" height="60">content</TD>
</TR>
</TABLE>
</BODY>
</html>
huoxu_08 2010-08-17
- 打赏
- 举报
css 忘记了
luozhangwen 2010-08-17
- 打赏
- 举报
另一种写法...
<html>
<head>
<style>
body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}
.mytable {
border-collapse:collapse;
width: 700px;
padding: 0;
margin: 0;
}
.th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
.even {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
.odd {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
background: #F5FAFA;
color: #797268;
}
</style>
</head>
<body>
<table class="mytable" cellspacing="0" cellpadding="0">
<tr>
<th class="th">AAA</th>
<th class="th">BBB</th>
</tr>
<tr>
<td class="even">111</td>
<td class="even">333</td>
</tr>
<tr>
<td class="odd">222</td>
<td class="odd">444</td>
</tr>
</table>
</body>
</html>
luozhangwen 2010-08-17
- 打赏
- 举报
对哦. 我这个是网上找的. CSS不是特别会..
火龙果被占用了 2010-08-17
- 打赏
- 举报
#mytable 加上 border-collapse: collapse; 这样即使 td 中是空的，也不会出现边线空缺。
PS：你的层叠样式感觉有问题。table 用了 #mytable 的 ID 选择器，为什么 td 和 th 就直接用标签了呢？按理说应该使用 #mytable td, #mytable th 的。
PS：你的层叠样式感觉有问题。table 用了 #mytable 的 ID 选择器，为什么 td 和 th 就直接用标签了呢？按理说应该使用 #mytable td, #mytable th 的。
