1

问题请看截图：

在此处输入图像描述

上面的代码是由html生成的。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>SYM</title>
    <style type="text/css" media="all">
        @import "test.css";
    </style>
</head>
<body>
    <div id="container">
    <div class="round-box">
      <table class="round-box-layout">
        <thead><tr><td></td><td></td><td></td></tr></thead>
        <tbody><tr><td></td><td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </td><td></td></tr></tbody>
        <tfoot><tr><td></td><td></td><td></td></tr></tfoot>
      </table>
    </div>
    <div class="round-box2">
      <table class="round-box-layout">
        <thead><tr><td></td><td></td><td></td></tr></thead>
        <tbody><tr><td></td><td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </td><td></td></tr></tbody>
        <tfoot><tr><td></td><td></td><td></td></tr></tfoot>
      </table>
    </div>
<body>
</html>

test.css 是

.round-box {
  width: 250px;
}

table.round-box-layout {
  border-collapse: collapse;
  width: 100%;

}

table.round-box-layout,
.round-box-layout tr,
.round-box-layout td {
  padding: 0;
  margin: 0;
  border: solid;
}

table.round-box-layout tbody td:first-child {
  background: url(img/borders/l-e.png) repeat-y 0 0;
  height: 36px;
  width: 33px;
}

table.round-box-layout tbody td:last-child {
  background: url(img/borders/r-e.png) repeat-y 0 0;
  height: 36px;
  width: 33px;
}

table.round-box-layout thead td {
  background: url(img/borders/t-e.png) repeat-x 0 0;
  height: 36px;
  width: 33px;
}

table.round-box-layout thead td:first-child {
  background: url(img/borders/tl-c.png) no-repeat 0 0;
}

table.round-box-layout thead td:last-child {
  background: url(img/borders/tr-c.png) no-repeat 0 0;
}

table.round-box-layout tfoot td {
  background: url(img/borders/b-e.png) repeat-x 0 0;
  height: 36px;
  width: 33px;
}

table.round-box-layout tfoot td:first-child {
  background: url(img/borders/bl-c.png) no-repeat 0 0;
}

table.round-box-layout tfoot td:last-child {
  background: url(img/borders/br-c.png) no-repeat 0 0;
}

.round-box2 {
  width: 800px;
}

问题是第一和最后（第三）列的宽度正在改变。这个宽度似乎取决于容器 div 的宽度和文本内容。请指教，如何解决这个问题。我正在使用 Firefox 3。

4

2 回答 2

6

默认的表格布局模型是auto，它以高度和宽度为建议。切换到fixed模型应该可以解决这个问题。

也就是说，您似乎在滥用表格进行布局（以实现圆角）。有更好的方法来获得圆角。

于 2009-06-28T11:06:22.037 回答
-1

您也许可以考虑 COLGROUPS 和 COLS 来实现这一点？

<table>
  <colgroup>
    <col width="36" />
    <col />
    <col width="36" />
  </colgroup>
  <tbody>
    <td>&nbsp;</td>
    <td>Content</td>
    <td>&nbsp;</td>
  </tbody>
</table>

您的其他内容可能可以通过 CSS 完成，但您为实现目标所采取的方法似乎过于复杂。当然，这可能有一个我不知道的原因，但正如我在尝试在这种技术中使用 :child 和 :parent 的经验一样 - 我真的不能对此发表太多评论。不过，有时我可能会补充一点，在空表格单元格中添加一个（不间断空格字符）会使事情的响应更像您期望的那样。

如果出于某种原因，上述内容对您来说太 HTML-y，您可以创建一些类以应用于 TD，然后将宽度应用于它们。

<td class="left-content-bar">&nbsp;</td>

.left-content-bar
{
  width: 36px;
}
于 2009-06-28T10:52:07.277 回答