• From: localhost
  • Registered: 2005-08-26
  • Posts: 24

Topic: Please help: html table width 100% problem

My test.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<style>
body {font: 11px Verdana,Tahoma;margin: 0;padding: 0;}
#body_wrap {padding: 10px;}
#page_header {clear: both;}
#page_footer {clear: both;}
#main_left {clear: left;float: left;    width: 170px;}
#main_right {float: right;width: 150px;}
#main_content {margin: 0 160px 10px 180px;}
#page_header, #main_left, #main_right {margin-bottom: 10px;}
#main_left .box, #main_right .box {margin-bottom: 20px;}
.classlist {padding: 5px;}
#body_wrap, #page_footer, #page_header, #main_content, .box, .tbl {border: 1px solid #000000;}
#body_wrap table {font-size: 1em;width: 100%;}
.classlist {vertical-align: top;}
.tbl th {background-color: #dff1f1;}
.tbl th, .tbl td {border-left: 1px solid #000000;padding: 4px 6px;}
.tbl .coll {border-left: none;}
.title {color: #658655;font: bold 1.6em Tahoma;margin: 0.5em;}
</style>
<div id="body_wrap">
    <div id="page_header">Header</div>

    <div id="main_left">
        <div id="l_menu">
        <ul>
            <li><a href=#>Item1</a></li>
            <li><a href=#>Item1</a></li>
            <li><a href=#>Item1</a></li>
            <li><a href=#>Item1</a></li>
        </ul>
        </div>
    </div>

    <div id="main_right">
        <div id="r_recenttopic" class="box">
            <div class="box_header">asasf</div>
            <div class="box_content">adfas</div>
        </div>
        <div id="r_recenttopic" class="box">
            <div class="box_header">asasf</div>
            <div class="box_content">adfas</div>
        </div>
        <div id="r_recenttopic" class="box">
            <div class="box_header">asasf</div>
            <div class="box_content">adfas</div>
        </div>
        <div id="r_recenttopic" class="box">
            <div class="box_header">asasf</div>
            <div class="box_content">adfas</div>
        </div>
    </div>

  <div id="main_content">
      <div class="title">Danh sach lop</div>
      <div class="classlist">
      <table class="tbl" cellspacing="0">
            <thead>
                <tr>
                    <th class="coll" scope="col">STT</th>
                    <th scope="col">Ten</th>
                    <th scope="col">Ngay sinh</th>
                    <th scope="col">lop</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="coll">asdas</td>
                    <td>asdasd</td>
                    <td>dasdsa</td>
                    <td>assad</td>
                </tr>
                <tr class="evenrow">
                    <td class="coll">asdas</td>
                    <td>asdasd</td>
                    <td>dasdsa</td>
                    <td>assad</td>
                </tr>
                <tr>
                    <td class="coll">asdas</td>
                    <td>asdasd</td>
                    <td>dasdsa</td>
                    <td>assad</td>
                </tr>
                <tr class="evenrow">
                    <td class="coll">asdas</td>
                    <td>asdasd</td>
                    <td>dasdsa</td>
                    <td>assad</td>
                </tr>
                <tr>
                    <td class="coll">asdas</td>
                    <td>asdasd</td>
                    <td>dasdsa</td>
                    <td>assad</td>
                </tr>
                <tr class="evenrow">
                    <td class="coll">asdas</td>
                    <td>asdasd</td>
                    <td>dasdsa</td>
                    <td>assad</td>
                </tr>
                <tr>
                    <td class="coll">asdas</td>
                    <td>asdasd</td>
                    <td>dasdsa</td>
                    <td>assad</td>
                </tr>
            </tbody>
      </table>
        </div>
    </div>

<div id="page_footer">footer</div>

</div>
</body>
</html>

There's a space above the table
http://img394.imageshack.us/img394/2911/019jr.gif

:Maxthon:FireFox:MirandaIM:ThunderBird:SmartFTP:FreePOPs:HTTrack:uTorrent:
:FlashGet:TCPOptimizer:SPECTralSMTPServer:UniExtract:PSPad:uStart:Everest:
:TotalCommander:ProcessExplorer:DriveMan:Regshot:Restoration:UPX:KolorGenerator:
:OpenOffice:AutoHotkey:IrfanView:Winamp:FSCapture:CDex:PNGOptimizer:spam:

Replika's Website

2 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Please help: html table width 100% problem

There is only a space in IE. Gecko works fine. Try
* html .classlist {height: 1%}
or
.classlist
{
height: auto !important;
height: 1%
}

As an alternative
* html #main_content {height: 1%}

  • From: localhost
  • Registered: 2005-08-26
  • Posts: 24

Re: Please help: html table width 100% problem

Thanks, but it not works sad except i change 100% to "auto"
In punbb i saw:

/* Begin IEWin Fix \*/
* HTML .inbox, * HTML .inform, * HTML .pun, * HTML .intd, * HTML .tclcon {HEIGHT: 1px}
* HTML .inbox DIV.postmsg {WIDTH: 98%}
/* End of IEWin Fix */

it fix this problem?

:Maxthon:FireFox:MirandaIM:ThunderBird:SmartFTP:FreePOPs:HTTrack:uTorrent:
:FlashGet:TCPOptimizer:SPECTralSMTPServer:UniExtract:PSPad:uStart:Everest:
:TotalCommander:ProcessExplorer:DriveMan:Regshot:Restoration:UPX:KolorGenerator:
:OpenOffice:AutoHotkey:IrfanView:Winamp:FSCapture:CDex:PNGOptimizer:spam:

Replika's Website

4 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Please help: html table width 100% problem

The fix I gave you works fine.
http://www.post21.co.uk/test/replika.html

If you want an alternative then adjusting the table width to 96% should do it.

5 Reply by Replika (edited by Replika 2005-12-20 11:20)

  • From: localhost
  • Registered: 2005-08-26
  • Posts: 24

Re: Please help: html table width 100% problem

Thanks for your support.
It's work fine with table now. But the same problem with FIELDSET when i try set width INPUT and TEXTAREA or FIELDSET to 100%

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<style>
body {font: 11px Verdana,Tahoma;margin: 0;padding: 0;}
#body_wrap {padding: 10px;}
#page_header {clear: both;}
#page_footer {clear: both;}
#main_left {clear: left;float: left; width: 170px;}
#main_right {float: right;width: 150px;}
#main_content {margin: 0 160px 10px 180px;}
#page_header, #main_left, #main_right {margin-bottom: 10px;}
#main_left .box, #main_right .box {margin-bottom: 20px;}
#body_wrap, #page_footer, #page_header, #main_content, .box, .tbl {border: 1px solid #000000;}


.classlist {padding: 5px; height: auto; height: 1%}
#body_wrap table, #body_wrap fieldset {font-size: 1em; width: 100%;}
.txtarea, .txtin {width: 100%}

.tbl th {background-color: #dff1f1;}
.tbl th, .tbl td {border-left: 1px solid #000000;padding: 4px 6px;}
.tbl .coll {border-left: none;}
.title {color: #658655;font: bold 1.6em Tahoma;margin: 0.5em;}
</style>
<div id="body_wrap">
    <div id="page_header">Header</div>

    <div id="main_left">
        <div id="l_menu">
        <ul>
            <li><a href=#>Item1</a></li>
            <li><a href=#>Item1</a></li>
            <li><a href=#>Item1</a></li>
            <li><a href=#>Item1</a></li>
        </ul>
        </div>
    </div>

    <div id="main_right">
        <div id="r_recenttopic" class="box">
            <div class="box_header">asasf</div>
            <div class="box_content">adfas</div>
        </div>
        <div id="r_recenttopic" class="box">
            <div class="box_header">asasf</div>
            <div class="box_content">adfas</div>
        </div>
        <div id="r_recenttopic" class="box">
            <div class="box_header">asasf</div>
            <div class="box_content">adfas</div>
        </div>
        <div id="r_recenttopic" class="box">
            <div class="box_header">asasf</div>
            <div class="box_content">adfas</div>
        </div>
    </div>

  <div id="main_content">
      <div class="title">Danh sach lop</div>
      <div class="classlist">
                  <fieldset>
                        <legend>aaaa</legend>
                        <label>bbbb<br /><input class="txtin" type="text" name="req_subject" value="" size="60" maxlength="70" tabindex="1" /><br /></label>
                        <label>cccc<br />
                        <textarea class="txtarea" name="req_message" rows="20" cols="60" tabindex="2"></textarea><br /></label>
                    </fieldset>
                    <fieldset>
                        <legend>Tuy chon</legend>
                        <label>Loai tin<br /><input name="n_type" type="radio" value="1" checked />Tin chinh <input name="n_type" type="radio" value="2" />Tin van</label>
                        <label>image<br /><input class="txtin" type="text" name="req_subject" value="" size="50" maxlength="70" tabindex="3" /><br /></label>
                    </fieldset>
        </div>
    </div>

<div id="page_footer">footer</div>

</div>
</body>
</html>

http://img366.imageshack.us/img366/7813/018vw.th.gif

:Maxthon:FireFox:MirandaIM:ThunderBird:SmartFTP:FreePOPs:HTTrack:uTorrent:
:FlashGet:TCPOptimizer:SPECTralSMTPServer:UniExtract:PSPad:uStart:Everest:
:TotalCommander:ProcessExplorer:DriveMan:Regshot:Restoration:UPX:KolorGenerator:
:OpenOffice:AutoHotkey:IrfanView:Winamp:FSCapture:CDex:PNGOptimizer:spam:

Replika's Website