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

发布于 2024-07-25 20:10:14 字数 3979 浏览 1 评论 0原文

对于这个问题请看截图：

在此处输入图像描述

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

原文

For the issue pls see the screenshot:

enter image description here

The above code has been generated by the 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>

The test.css is

.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;
}

The problem is the first and last (third) columns' widths are getting altered. This width seems to depend on the width of container div and the text content. Please advise, how to fix this. I am using Firefox 3.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

抱着落日 2024-08-01 20:10:15

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

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

您的其他内容可能可以通过 CSS 完成，但您为实现目标而采取的方法似乎过于复杂。当然，这可能有一个我不知道的原因，但由于我在尝试使用此技术中的 :child 和 :parent 方面经验丰富 - 我无法对此进一步评论太多。不过，有时我可能会添加一个（不间断空格字符）到空表格单元格使事情的响应更像您的预期。

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

<td class="left-content-bar"> </td>

.left-content-bar
{
  width: 36px;
}

You might be able to consider COLGROUPS and COLS to accoplish this?

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

Your other content might be ok doing via CSS, but it seems overly complex the method you've taken for what you are trying to achieve. There may be a reason for this that I don't know about of course, but as I'm experienced in trying to use the :child and :parent's in this technique - I can't really comment too much further on that. Though, I might add that sometimes, adding a (non-breaking space character) to the empty table cells makes things respond a little more like you expect.

If the above was too HTML-y for you for whatever reason, you could create some classes to apply to the TDs, then apply the width to them.

<td class="left-content-bar"> </td>

.left-content-bar
{
  width: 36px;
}

回复收藏 0 原文

尐籹人 2024-08-01 20:10:14

默认的 table-layout 模型是 auto< /code>，它将高度和宽度作为建议。切换到固定模型应该可以解决这个问题。

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

回复收藏 0 原文

~没有更多了~

关于作者

疑心病

暂无简介

0 文章

0 评论

502 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

lioqio

Single

禾厶谷欠

alipaysp_2zg8elfGgC

qq_N6d4X7

放低过去

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

lioqio

Single

禾厶谷欠

alipaysp_2zg8elfGgC

qq_N6d4X7

放低过去

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。