Question

我试图在表格中获得进度条，进度条的高度不会改变表格高度，我的css：

  table#t
  {
    behavior: column-resizer;
    overflow: hidden;
    table-layout: auto;
  }

  table#t tr { height:1.4em; }

  table#t > tbody
  {
    padding-left:20px;
  }

  table#t > caption
  {
    foreground-repeat: no-repeat;
    foreground-position: 3px 50%;
    foreground-image-cursor:pointer;
    foreground-image:url(theme:tree-view-glyph-open);
    padding-left:1.4em;
    height:1.4em;
    line-height:1.4em;
    active-on!: is-on-icon()? self:collapsed = !self:collapsed;
    double-click!: !is-on-icon()? self:collapsed = !self:collapsed;
  }

  table#t > caption:collapsed
  {
    foreground-image:url(theme:tree-view-glyph-closed);
  }

  caption:collapsed + tbody
  {
    visibility:collapse;
  }
  p.custom > progress
  {
    behavior:progress; 
    background-image:url(images/progress-back.png);
    background-position:2px 2px 2px 2px;

    height: 8px;
    width: 100px;
    padding: 1px;

    foreground-position:1px 1px 1px 1px;
    foreground-image:url(images/progress-body.png);  
  }

我的HTML：

<table #t>
<caption><font color="grey">Files</font></caption>
  <tbody .first>
        <tr>
            <td titleid="file1"><img src="../Icons/2002.ico" width=16 height=16 /><div style="width: 18px"></div></td>
            <td titleid="file1"><div style="width: 210px">Application.exe</div></td>
            <td titleid="file1"><div style="width: 60px">1.6 Mb</div></td>
            <td titleid="prog2"><p .custom><div style="width: 100px"><progress name="p2" maxvalue="100" value="0"/></div></td>
        </tr>
        <tr>
            <td titleid="file2"><img src="../Icons/2002.ico" width=16 height=16 /><div style="width: 18px"></div></td>
            <td titleid="file2"><div style="width: 210px">Archive.7z</div></td>
            <td titleid="file2"><div style="width: 60px">843 Mb</div></td>
            <td titleid="prog3"><p .custom><div style="width: 100px"><progress name="p2" maxvalue="100" value="50"/></div></td>
        </tr>
  </tbody>
</table>

如果没有进度条，这就是它的样子：

http://imgur.com/MwHFXN3

并使用进度条：

http://imgur.com/ruj6Pv2

我已经尝试过标签并在css和html中设置进度条和表格的高度，但我似乎无法简单地添加进度条而不会丢失高度。

表中的进展

0 个答案: