HTML 表格列宽：固定宽度和可变宽度的结合

发布于 2024-12-17 02:18:46 字数 355 浏览 2 评论 0原文

我制作了一个这样的表格：

<table style="width:1000px;">
  <tr>
    <td>aaa</td>
    <td id="space"></td>
    <td class="fixed-width">bbb</td>
    <td class="fixed-width">ccc</td>
  </tr>
</table>

如何使用 CSS 使 b 和 c 列具有固定宽度，a 列仅占用所需的空间，并且 space 列扩展以填充其余部分桌子？

原文

I've made a table as such:

<table style="width:1000px;">
  <tr>
    <td>aaa</td>
    <td id="space"></td>
    <td class="fixed-width">bbb</td>
    <td class="fixed-width">ccc</td>
  </tr>
</table>

How would I do the CSS so that the b and c columns have a fixed width, the a column only takes as much space as needed, and the space column to expand to fill the rest of the table?

分享到QQ

分享到微博

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

发布评论

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

巾帼英雄 2024-12-24 02:18:46

我不是 CSS 专家，但没有办法做到这一点似乎不太正确。这似乎适用于 Firefox 和 IE7。我没有检查过其他浏览器。

第一个收缩贴合的设置（使用 CSS）为 0 宽度，因此它会缩小以适合内容。

第二个空格设置（使用 CSS）的宽度大于表格适合的宽度。

最后两个固定宽度的宽度不在上。相反，它设置在上。风格。这会强制列宽。

<!DOCTYPE html>
<html>
    <head>
        <title>cols</title>
        <style type="text/css">
            td.fixed-width {
                width: 100px;
                background-color:aqua
            }
            td.min-width {background-color:aqua}
            td.space {border: thick blue solid}
        </style>
    </head>
    <body style="width:1100px; font-family:sans-serif">
        <table style="width:1000px;">
            <col style="width:0"/>
            <col style="width:1000px"/>
            <col span="2" />
            <tr>
                <td class="min-width">aaa</td>
                <td class="space"></td>
                <td class="fixed-width">bbb</td>
                <td class="fixed-width">ccc</td>
            </tr>
            <tr>
                <td class="min-width">aaa asdfasdf asdfsad</td>
                <td class="space"></td>
                <td class="fixed-width">bbb fasdas</td>
                <td class="fixed-width">ccc vdafgf asdf adfa a af</td>
            </tr>
        </table>
    </body>
</html>

I'm no CSS guru, but it just didn't seem right that there'd be no way to do this. This appears to work in Firefox and IE7. I have not checked other browsers.

The first shrink-to-fit <col> is set (using CSS) to 0 width, so it shrinks to fit the content.

The second space <col> is set (using CSS) to a width larger than will fit in the table.

The width of the last two fixed-width <col>s is not on the <col>. Instead, it's set on the <td> style. This forces the column width.

<!DOCTYPE html>
<html>
    <head>
        <title>cols</title>
        <style type="text/css">
            td.fixed-width {
                width: 100px;
                background-color:aqua
            }
            td.min-width {background-color:aqua}
            td.space {border: thick blue solid}
        </style>
    </head>
    <body style="width:1100px; font-family:sans-serif">
        <table style="width:1000px;">
            <col style="width:0"/>
            <col style="width:1000px"/>
            <col span="2" />
            <tr>
                <td class="min-width">aaa</td>
                <td class="space"></td>
                <td class="fixed-width">bbb</td>
                <td class="fixed-width">ccc</td>
            </tr>
            <tr>
                <td class="min-width">aaa asdfasdf asdfsad</td>
                <td class="space"></td>
                <td class="fixed-width">bbb fasdas</td>
                <td class="fixed-width">ccc vdafgf asdf adfa a af</td>
            </tr>
        </table>
    </body>
</html>

回复收藏 0 原文

~没有更多了~