Question

问题请参阅截图：

enter image description here

上面的代码是由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 。

Answer 1

默认的table-layout模型是auto，它将高度和宽度作为建议。切换到fixed模型应解决此问题。

那就是说，看起来你正在滥用表格进行布局（以实现圆角）。有better ways to get rounded corners。

Answer 2

你或许可以考虑使用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;
}

尽管将表列宽设置为固定值，但表列宽度仍会增加

2 个答案: