×

Loading...
Ad by
  • 推荐 OXIO 加拿大高速网络，最低月费仅$40. 使用推荐码 RCR37MB 可获得一个月的免费服务
Ad by
  • 推荐 OXIO 加拿大高速网络，最低月费仅$40. 使用推荐码 RCR37MB 可获得一个月的免费服务

@Florida

Another CSS question. Please help.

fatbean(一壶豆浆喜相逢)
本文发表在 rolia.net 枫下论坛I'm building up a table with fixed headers. After I googled around and got some very helpful samples, it seemed I've already achieved the goal. However, there's one problem I can't fix, that is, if the content of a table cell is a drop-down list (<select>), the fixed table header won't work and will go under the cell ( a table header is always supposed to stay on the top and when you scroll up and down, the non-header cells should go under the header).
Here's the source code for the HTML
-----------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>TEST</title>
<link href="StyleSheet.css" rel=styleSheet type=text/css>
</head>
<body>
<STYLE type=text/css>
THEAD.fixedHeader TR {
POSITION: relative; vertical-align:top;border-top: black 1px solid;
background-color: #89AA89;
font-family: "Arial","Helvetica","sans-serif", "Verdana";
font-size: 8pt;
font-weight: bold;
color: white
}
</STYLE>
<form >
<STYLE type=text/css>
DIV.tableContainer1 {
CLEAR: both; OVERFLOW: auto; text-align:left; WIDTH: 750px;HEIGHT: 100px;
border-style: solid;
border-bottom: black 1px solid;
border-left: black 1px solid;
border-right: black 1px solid;
border-top: black 1px solid;
}

DIV.tableContainer1 TABLE {
FLOAT: left; WIDTH: 733px;
}</STYLE>
<table width="750" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><font class="sectionTitle">Tables</font></td>
<td align="right"><font class="tips" style="cursor: default;">Tips</font>
</td>
</tr>
</table>
<DIV class="tableContainer1">
<table border=0 cellpadding="1" cellspacing="0">
<THEAD class=fixedHeader>
<tr>
<td class="formLabel02" width=25>&nbsp;</td>
<td class="formLabel02" width=600>Table Name</td>
<td class="formLabel02" width=100>Format</td>
</tr>
</THEAD>
<TBODY>

<tr>
<td class="formField01" align="center" width="25">

99
</td>
<td class="formField01" width="600">

</td>
<td class="formField01" width="80">AAAAAAAAAAAAAA
</td>
</tr>

<tr>
<td class="formField01" align="center" width="25">

100
</td>
<td class="formField01" width="600">
11
</td>
<td class="formField01" width="80">
<select name="ProdGrpSubmissionSettingView.PROD_SUB_SET_FILE_TYPE_ID_1" >
<option value="" label="" ></option>
<option value="87" label="MS Excel" selected >MS Excel</option>
</select>
</td>
</tr>

<tr>
<td class="formField01" align="center" width="25">
22

</td>
<td class="formField01" width="600">

</td>
<td class="formField01" width="80">
<select name="ProdGrpSubmissionSettingView.PROD_SUB_SET_FILE_TYPE_ID_2" >
<option value="" label="" ></option>
<option value="87" label="MS Excel" selected >MS Excel</option>

</select>
</td>
</tr>

<tr>
<td class="formField01" align="center" width="25">

33
</td>
<td class="formField01" width="600">

</td>
<td class="formField01" width="80">
<SELECT name="select_test__3" >
<option value="" label="" ></option>
<option value="87" label="MS Excel" selected >MS Excel</option>
</SELECT>
</td>
</tr>

<tr>
<td class="formField01" align="center" width="25">
44

</td>
<td class="formField01" width="600">

</td>
<td class="formField01" width="80">
<select name="select_test__4" >
<option value="" label="" ></option>
<option value="87" label="MS Excel" selected >MS Excel</option>

</select>
</td>
</tr>
<tr>
<td class="formField01" align="center" width="25">
55
</td>
<td class="formField01" width="600">

</td>
<td class="formField01" width="80">
<select name="select_test__4" >
<option value="" label="" ></option>
<option value="87" label="MS Excel" selected >MS Excel</option>

</select>
</td>
</tr>
</TBODY>
</table>
</DIV>

</form>
</body>
</html>更多精彩文章及讨论，请光临枫下论坛 rolia.net
(#2498738@0)
Last Updated: 2005-9-12
This post has been archived. It cannot be replied.
Report

Replies, comments and Discussions:

  • 工作学习 / 专业技术讨论 / On a HTML web page, I included a DTD file in order to build a table with fixed headers. And then some properties in my CSS file don't work. Does anybody have any idea how DTD file affects CSS file? -fatbean(一壶豆浆喜相逢); 2005-9-12 {603} (#2498278@0)
    For example, the following CSS class definition seems not to work any more after including that DTD file.
    .PageTitle {font-family: "Tahoma", "Arial","Helvetica","sans-serif", "Verdana";
    font-size: 10pt;
    font-weight: bold;
    color: #666633;}

    And the DTD file is:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

    I'm not really a web developer and really got pissed off by this kind of issues. Please help..thanks in advance.
    • This works for me, must be some other issues. Please give more details. -canadiantire(轮胎-M.I.N.K.); 2005-9-12 (#2498293@0)
    • It works. I tried your CSS and DTD without any problem. I can help you figure out where the problem is if you post your HTML code and CSS file. -gamma(gamma); 2005-9-12 (#2498380@0)
    • Thanks for your replies. Please come in to see my test HTML page. -fatbean(一壶豆浆喜相逢); 2005-9-12 {881} (#2498484@0)
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>TEST PAGE</title>
      <link href="StyleSheet.css" rel=styleSheet type=text/css>
      </head>

      <body bgcolor="white" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

      <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td width="30%" bgcolor="#CCCC99">&nbsp;&nbsp;
      <font class="pageTitle">Welcome My Friend</font>
      </td>
      </tr>
      </table>

      </body>
      </html>
      -------------------------------------------------------------------------
      Once I put <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> at the very beginning of the page, the CSS will completely lose its magic and the Welcome text will become plain.
      • Thanks guys, I've found out the problem. It was because class name became case-sensitive after I included the DTD file. -fatbean(一壶豆浆喜相逢); 2005-9-12 (#2498507@0)
    • Another CSS question. Please help. -fatbean(一壶豆浆喜相逢); 2005-9-12 {4663} (#2498738@0)
      本文发表在 rolia.net 枫下论坛I'm building up a table with fixed headers. After I googled around and got some very helpful samples, it seemed I've already achieved the goal. However, there's one problem I can't fix, that is, if the content of a table cell is a drop-down list (<select>), the fixed table header won't work and will go under the cell ( a table header is always supposed to stay on the top and when you scroll up and down, the non-header cells should go under the header).
      Here's the source code for the HTML
      -----------------------------------------------------------------------------------------------
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
      <html>
      <head>
      <title>TEST</title>
      <link href="StyleSheet.css" rel=styleSheet type=text/css>
      </head>
      <body>
      <STYLE type=text/css>
      THEAD.fixedHeader TR {
      POSITION: relative; vertical-align:top;border-top: black 1px solid;
      background-color: #89AA89;
      font-family: "Arial","Helvetica","sans-serif", "Verdana";
      font-size: 8pt;
      font-weight: bold;
      color: white
      }
      </STYLE>
      <form >
      <STYLE type=text/css>
      DIV.tableContainer1 {
      CLEAR: both; OVERFLOW: auto; text-align:left; WIDTH: 750px;HEIGHT: 100px;
      border-style: solid;
      border-bottom: black 1px solid;
      border-left: black 1px solid;
      border-right: black 1px solid;
      border-top: black 1px solid;
      }

      DIV.tableContainer1 TABLE {
      FLOAT: left; WIDTH: 733px;
      }</STYLE>
      <table width="750" cellpadding="0" cellspacing="0" border="0">
      <tr>
      <td><font class="sectionTitle">Tables</font></td>
      <td align="right"><font class="tips" style="cursor: default;">Tips</font>
      </td>
      </tr>
      </table>
      <DIV class="tableContainer1">
      <table border=0 cellpadding="1" cellspacing="0">
      <THEAD class=fixedHeader>
      <tr>
      <td class="formLabel02" width=25>&nbsp;</td>
      <td class="formLabel02" width=600>Table Name</td>
      <td class="formLabel02" width=100>Format</td>
      </tr>
      </THEAD>
      <TBODY>

      <tr>
      <td class="formField01" align="center" width="25">

      99
      </td>
      <td class="formField01" width="600">

      </td>
      <td class="formField01" width="80">AAAAAAAAAAAAAA
      </td>
      </tr>

      <tr>
      <td class="formField01" align="center" width="25">

      100
      </td>
      <td class="formField01" width="600">
      11
      </td>
      <td class="formField01" width="80">
      <select name="ProdGrpSubmissionSettingView.PROD_SUB_SET_FILE_TYPE_ID_1" >
      <option value="" label="" ></option>
      <option value="87" label="MS Excel" selected >MS Excel</option>
      </select>
      </td>
      </tr>

      <tr>
      <td class="formField01" align="center" width="25">
      22

      </td>
      <td class="formField01" width="600">

      </td>
      <td class="formField01" width="80">
      <select name="ProdGrpSubmissionSettingView.PROD_SUB_SET_FILE_TYPE_ID_2" >
      <option value="" label="" ></option>
      <option value="87" label="MS Excel" selected >MS Excel</option>

      </select>
      </td>
      </tr>

      <tr>
      <td class="formField01" align="center" width="25">

      33
      </td>
      <td class="formField01" width="600">

      </td>
      <td class="formField01" width="80">
      <SELECT name="select_test__3" >
      <option value="" label="" ></option>
      <option value="87" label="MS Excel" selected >MS Excel</option>
      </SELECT>
      </td>
      </tr>

      <tr>
      <td class="formField01" align="center" width="25">
      44

      </td>
      <td class="formField01" width="600">

      </td>
      <td class="formField01" width="80">
      <select name="select_test__4" >
      <option value="" label="" ></option>
      <option value="87" label="MS Excel" selected >MS Excel</option>

      </select>
      </td>
      </tr>
      <tr>
      <td class="formField01" align="center" width="25">
      55
      </td>
      <td class="formField01" width="600">

      </td>
      <td class="formField01" width="80">
      <select name="select_test__4" >
      <option value="" label="" ></option>
      <option value="87" label="MS Excel" selected >MS Excel</option>

      </select>
      </td>
      </tr>
      </TBODY>
      </table>
      </DIV>

      </form>
      </body>
      </html>更多精彩文章及讨论，请光临枫下论坛 rolia.net
      • Using seperate tables for Header and content will solve your problem. -gamma(gamma); 2005-9-12 (#2499163@0)
        • 谢谢回复。下班前发现上面那个问题是个IE的Known issue，网上有一些用Javascript做的workaround.//用两个table如果table里面内容长度不确定不好align。我就是因为这个问题才把现在的两个table改成一个table -fatbean(一壶豆浆喜相逢); 2005-9-12 (#2499209@0)
          • Thank you. Your DIV.tableContainer1CSS provides me with a solution to my mergecode :)) -gamma(gamma); 2005-9-13 (#2500018@0)

More Topics

  • 看大家讨论日语，俺也正在认真学习。其实语言问题应该是很快也很容易就解决的，可能比自动驾驶来的还快。TREK里面，全宇宙的人都在大脑里安装了UNIVERSAL TRANSLATOR，外星人之间相互交流无障碍。废话少说，看视频。。。加上个MIC和耳机，不同国家的人就可以无障碍交流。
  • 肉脸真有搞 IT 的？Linux 把俄国中国伊朗踢出去了好像肉脸 IT 没啥感觉似的
  • 请问web developer和software developer技术上有什么区别？
  • Elon Musk 带着川普总统奔向火星了。
  • 扔硬币的实验研究
    • 枫下论坛主坛 /  工作学习 /  专业技术讨论