这是我编写的一段代码,用于将2个表放在更大的表中。但我无法修复外表<td>
的大小。我想让外表的<td>
可滚动,以便我可以在外表的<td>
内滚动表:
示例
<table id="maintable">
<tr>
<td>
<table class="smsSecond">
<tr style="background-color: #3C3C3C;">
<td colspan="2" width="auto" align="center">
Resolution
<!--img id="delete" src="icons/delete.png" height="10" width="10" style="float: right;"/-->
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Harsha P
</td>
<td>
-NA-
</td>
</tr>
</table>
</td>
<td>
<table class="smsSecond"><!--bgcolor="#4ab54d"><class="smsSecond"-- this is td bgcolor: bgcolor="#4ab54d"-->
<tr style="background-color: #3C3C3C;" >
<td colspan="2" width="auto" align="center">
Ticket Info
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center"><!-- style="color: #000000; font-size: 12px;"-->
<td>
Ticket number
</td>
<td>
HFK-864-69976
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center"><!--style="color: #000000; font-size: 15px; background-color: #FFFFFF" --><!--background-color: #A4EAF6-->
<td>
Department
</td>
<td>
Support
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Priority
</td>
<td>
P3-Normal
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
Open Date and Time
</td>
<td>
2011-02-28 21:24:01
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Close Date and Time
</td>
<td>
2011-02-28 21:24:01
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
Total Time
</td>
<td>
00:03:09
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Ticket Spent
</td>
<td>
00:02:00
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
No. of staff worked
</td>
<td>
2
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Ticket Status
</td>
<td>
Closed
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
SLA
</td>
<td>
Yes
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Type
</td>
<td>
Issue
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
Red Flag
</td>
<td>
0
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Yellow Flag
</td>
<td>
0
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
Orange Flag
</td>
<td>
0
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Closed by
</td>
<td>
Harsha p
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
到目前为止我使用的CSS是:
.smsSecond{
border-radius: 4px;
padding: 8px 8px 8px 8px;
/*max-height: 333px;
overflow: scroll;*/
font-family:Arial;
font-size: 12px;
color: #FFFFFF;
background-color: #CACACA;
border: 1px solid black;
/*background-color: #1AB0EA;*/
}
.smsSecond .oddrow{
color: #000000;
font-size: 12px;
}
.smsSecond .evenrow{
color: #000000;
font-size: 12px;
background-color: #FFFFFF;
}
td{
padding:5px;
font-size: 13px;
width: 290px;
overflow: scroll;
text-overflow: string;
white-space: nowrap;
border: 1px solid black;
}
tr a{
color: #4EB145;
}
tr a:hover{
color: #4EB145;
text-decoration: none;
font-weight: bolder;
}
我应该将外表的字段用于固定大小和可滚动的内容? 什么应该是#maintable的CSS属性? 请帮忙。 提前谢谢。
答案 0 :(得分:2)
您可以将内部表格包裹在div
:
<强> HTML:强>
<div class="inner_wrapper">
<table ...
<强> CSS:强>
.inner_wrapper {
overflow:scroll;
height: 110px;
}
结果如下:
答案 1 :(得分:1)