css中 怎么实现div中的table太大时，可以显示滚动条
日期：2014-05-17 浏览次数：20869 次
css中 如何实现div中的table太大时，可以显示滚动条
1. css中 如何实现div中的table太大时，显示滚动条
2. 定义一个 <td> 中的字体，如何最方便定义同一列的字体
------解决方案--------------------
div { overflow: scroll; height: 100px; width: 100px; }
------解决方案--------------------
div { overflow: auto; height: 100px; width: 100px; }
定义同一列的字体，好像只能对td进行指定样式。
------解决方案--------------------
第一个有人解答了
第二个我来试试了
<table> <tr> <td> </td> </tr> </table>
这是常见一行一列的表格了
<tr> 表示行 </tr> 表示列
其实 <table> 不止这几个标签了，还有 <thead> 表头 <tbody> 表身 <tfoot> 表尾。就像下面这样2行三列的表格
<table>
<thead>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tbody>
</table>
还有一个标签 <th> 表示列名行名的标签，用于表示列首或者行首单元格。里面的文字是 <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/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> 高宽值 </title>
<style type= "text/css ">
<!--
* {
margin:0px;
padding:0px;
}
html,body
{
width:100%;
height:100%;
}
body,td,th {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 14px;
}
td,th
{
padding:5px;
}
#table-canvas {
width:auto;
margin:0px auto;
text-align: center;
border-collapse:collapse;
background-color:#99cc66;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 14px;
line-height:1.2;
}
#table-canvas caption
{
margin:0px auto;
}
#table-canvas td,th
{
border:1px solid #FFFFFF;
}
#table-canvas thead th
{
background-color:#339933;
}
#table-canvas tbody th
{
background-color:#339933;
}
#table-canvas tbody td
{
background-color:#FFFF99;
}
#table-canvas tr.balance td
{
background-color:#99cc66;
}
#table-canvas tr.gray td
{
background-color:#cccccc;
}
#table-canvas tfoot td
{
text-align:right;
padding-right:10px;
}
-->
</style>
</head>
<body>
<table width= "100% " border= "1 " cellpadding= "0 " cellspacing= "0 " id= "table-canvas " summary= "画布canvas ">
<caption align= "top ">
画布在不同分辨率下和不同浏览器中的高宽值
</caption>
<thead>
<tr>
<th> 浏览器 </th>
<th> 640*480宽 </th>
<th> 640*480高 </th>
<th> 800*600宽 </th>
<th> 800*600高 </th>
</tr>
</thead>
<tbody>
<tr onmouseover= "this.className= 'gray ' " onmouseout= "this.className= ' ' ">
<th> IE5.x (win ) </th>
<td> 600 </td>
<td> 275 </td&
1. css中 如何实现div中的table太大时，显示滚动条
2. 定义一个 <td> 中的字体，如何最方便定义同一列的字体
------解决方案--------------------
div { overflow: scroll; height: 100px; width: 100px; }
------解决方案--------------------
div { overflow: auto; height: 100px; width: 100px; }
定义同一列的字体，好像只能对td进行指定样式。
------解决方案--------------------
第一个有人解答了
第二个我来试试了
<table> <tr> <td> </td> </tr> </table>
这是常见一行一列的表格了
<tr> 表示行 </tr> 表示列
其实 <table> 不止这几个标签了，还有 <thead> 表头 <tbody> 表身 <tfoot> 表尾。就像下面这样2行三列的表格
<table>
<thead>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tbody>
</table>
还有一个标签 <th> 表示列名行名的标签，用于表示列首或者行首单元格。里面的文字是 <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/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> 高宽值 </title>
<style type= "text/css ">
<!--
* {
margin:0px;
padding:0px;
}
html,body
{
width:100%;
height:100%;
}
body,td,th {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 14px;
}
td,th
{
padding:5px;
}
#table-canvas {
width:auto;
margin:0px auto;
text-align: center;
border-collapse:collapse;
background-color:#99cc66;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 14px;
line-height:1.2;
}
#table-canvas caption
{
margin:0px auto;
}
#table-canvas td,th
{
border:1px solid #FFFFFF;
}
#table-canvas thead th
{
background-color:#339933;
}
#table-canvas tbody th
{
background-color:#339933;
}
#table-canvas tbody td
{
background-color:#FFFF99;
}
#table-canvas tr.balance td
{
background-color:#99cc66;
}
#table-canvas tr.gray td
{
background-color:#cccccc;
}
#table-canvas tfoot td
{
text-align:right;
padding-right:10px;
}
-->
</style>
</head>
<body>
<table width= "100% " border= "1 " cellpadding= "0 " cellspacing= "0 " id= "table-canvas " summary= "画布canvas ">
<caption align= "top ">
画布在不同分辨率下和不同浏览器中的高宽值
</caption>
<thead>
<tr>
<th> 浏览器 </th>
<th> 640*480宽 </th>
<th> 640*480高 </th>
<th> 800*600宽 </th>
<th> 800*600高 </th>
</tr>
</thead>
<tbody>
<tr onmouseover= "this.className= 'gray ' " onmouseout= "this.className= ' ' ">
<th> IE5.x (win ) </th>
<td> 600 </td>
<td> 275 </td&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
