×

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

Another CSS question. Please help.

本文发表在 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
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?
    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.
    • 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.
    • Thanks for your replies. Please come in to see my test HTML page.
      <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.
    • Another CSS question. Please help.
      本文发表在 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.
        • 谢谢回复。下班前发现上面那个问题是个IE的Known issue,网上有一些用Javascript做的workaround.//用两个table如果table里面内容长度不确定不好align。我就是因为这个问题才把现在的两个table改成一个table
          • Thank you. Your DIV.tableContainer1CSS provides me with a solution to my mergecode :))