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>
<td> 760 </td>
<td> 395 </td>
</tr>
<tr class= "balance " onmouseover= "this.className= 'gray ' " onmouseout= "this.className= 'balance ' ">
<th> NN4.5+ (win) </th>
<td> 604 </td>
<td> 294 </td>
<td> 764 </td>
<td> 414 </td>
</tr>
<tr onmouseover= "this.className= 'gray ' " onmouseout= "this.className= ' ' ">
<th> NN4.0x (win) </th>
<td> 592 </td>
<td> 294 </td>
<td> 764 </td>
<td> 414 </td>
</tr>
<tr class= "balance " onmouseover= "this.className= 'gray ' " onmouseout= "this.className= 'balance ' ">
<th> NN4.5+ (mac) </th>
<td> 582 </td>
<td> 309 </td>
<td> 752 </td>
<td> 429 </td>
</tr>
<tr onmouseover= "this.className= 'gray ' " onmouseout= "this.className= ' ' ">
<th> NN4.0x (mac) </th>
<td> 600 </td>
<td> 315 </td>
<td> 742 </td>
<td> 435 </td>
</tr>
<tr class= "balance " onmouseover= "this.className= 'gray ' " onmouseout= "this.className= 'balance ' ">
<th> IE4.x (win ) </th>
<td> 563 </td>
<td> 275 </td>
<td> 760 </td>
<td> 395 </td>
</tr>
<tr onmouseover= "this.className= 'gray ' " onmouseout= "this.className= ' ' ">
<th> IE4.5x (mac) </th>
<td> 574 </td>
<td> 318 </td>
<td> 723 </td>
<td> 438 </td>
</tr>
<tr class= "balance " onmouseover= "this.className= 'gray ' " onmouseout= "this.className= 'balance ' ">
<th> NN3.x (win) </th>
<td> 600 </td>
<td> 270 </td>
<td> 760 </td>
<td> 390 </td>
</tr>
<tr onmouseover= "this.className= 'gray ' " onmouseout= "this.className= ' ' ">
<th> NN3.x (mac) </th>
<td> 582 </td>
<td> 306 </td>
<td> 742 </td>
<td> 426 </td>
</tr>
<tr class= "balance " onmouseover= "this.className= 'gray ' " onmouseout= "this.className= 'balance ' ">
<th> IE3.x (win) </th>
<td> 613 </td>
<td> 276 </td>
<td> 763 </td>
<td> 396 </td>
</tr>
<tr onmouseover= "this.className= 'gray ' " onmouseout= "this.className= ' ' ">
<th> IE3.x (mac) </th>
<td> 598 </td>
<td> 317 </td>
<td> 758 </td>
<td> 437 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan= "5 "> 数据来源《网站设计手册》正文56页 </td>
</tr>
</tfoot>
</table>
</body>
</html>
[解决办法]
1.
<div style= "width:300px;height:200px;overflow:scroll; ">
<table style= "width:500px;height:500px;background-color:#ddd; ">
<tr>
<td> 滚动条 </td>
</tr>
<table>
</div>
[解决办法]
1.
<div style= "width:300px;height:200px;overflow:scroll; ">
<table style= "width:500px;height:500px;background-color:#ddd; ">
<tr>
<td> 滚动条 </td>
</tr>
<table>
</div>
2.
<style type= "text/css ">
td {background-color:#fff;font-size:12px;padding:3px;}
.col1 {font-family:隶书;}
.col2 {font-family:宋体;}
</style>
<table cellspacing= "1 " style= "background-color:#ddd;padding:0; ">
<tr>
<td class= "col1 "> 滚动条 </td>
<td class= "col2 "> 滚动条 </td>
</tr>
<tr>
<td class= "col1 "> 滚动条 </td>
<td class= "col2 "> 滚动条 </td>
</tr>
<table>
[解决办法]
<div style= "width:300px;height:200px; ">
[解决办法]
定义统一列的style其实很容易，有 <table> 里面其实可以嵌入 <col> 和 <colGroup> 这两个标签，不表示内容，就为了定义列的style。例如这样就可以让第二列的样式变为alternate类：
<table>
<colgroup>
<col />
<col class= "alternate " />
<col />
</colgroup>
<tr>
<td> This </td>
<td> That </td>
<td> The other </td>
</tr>
<tr>
<td> Ladybird </td>
<td> Locust </td>
<td> Lunch </td>
</tr>
</table>
