正文 

当前位置： 首页 > 知识 >

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

     2023-03-06     260

关键词：

【中文标题】HTML表格列宽：结合固定和可变宽度【英文标题】：HTML table column widths: combining fixed and variable widths 【发布时间】：2012-01-01 17:14:04 【问题描述】：

我已经做了一个这样的表：

<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 列只占用所需的空间，并且空间列要扩展以填充表格的其余部分？

【问题讨论】：

【参考方案1】：

我不是 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>

【讨论】：

@whotemp - 不客气。我仔细阅读了 CSS 2.1 规范，看看是否能找到任何需要这种行为的东西，但结果却是空的。我认为的意思是，如果表格中的水平空间不足，则优先考虑为列中的单元格提供它们单独的内容声称需要，而不是提供 宽度。

HTML表格列宽实践

】HTML表格列宽实践【英文标题】：HTMLTablecolumnwidthpractices【发布时间】：2011-04-2223:41:34【问题描述】：在表格中选择列宽时有哪些好的做法？假设我有四列，名称（可变宽度）、描述（文本的长内容）、计数（最多3个字符）、... 查看详情

固定行跨度和表格布局时的表格列宽

】固定行跨度和表格布局时的表格列宽【英文标题】：Tablecolumnwidthwhenhavingrowspanandtable-layoutfixe【发布时间】：2018-01-2501:42:48【问题描述】：我一直在固定我的html表格的第二列的宽度。下面是我的桌子的打印屏幕：下面是CSS代码... 查看详情

如何将 html 列宽固定为其内容的最大宽度？

...1-11-0801:45:54【问题描述】：我正在尝试为输入表单格式化表格，如下所示。表格看起来有点像这样：Name:Timeofday:以此类推，其中每个字段标签后面跟着输入字段。我的目标是有一个包含两列的表，一列用于字段标签，另一列用于... 查看详情

css网格可变列宽和换行

】css网格可变列宽和换行【英文标题】：cssgridvariablecolumnwidthandwrapping【发布时间】：2019-01-1720:33:13【问题描述】：我有一个我认为很简单的任务：给定x个项目，在网格中显示它们，每列是内容的宽度。如果列数超过容器的宽度... 查看详情

如何获得固定的表格列宽

】如何获得固定的表格列宽【英文标题】：Howtogetfixedtablecolumnswidth【发布时间】：2012-01-0216:44:28【问题描述】：如何将单个表格列固定为特定宽度，以便无论该列中有多少文本，列的宽度都保持不变？&lt;col&gt;标签只适用... 查看详情

怎样使word表格的宽度高度固定不变

以word2007为例：1、打开word文档，单击表格左上角的“表格控点”按钮选中整个表格，单击“布局”菜单，单击“属性”命令。2、在弹出的“表格属性”对话框中单击“行”选项卡，勾选“指定高度”，输入或调整高度值，将“... 查看详情

哪个是指定 HTML 固定列宽（宽度或样式属性）的更好方法

】哪个是指定HTML固定列宽（宽度或样式属性）的更好方法【英文标题】：WhichisthebetterwayofspecifyingHTMLFixedColumnwidth(widthorstyleattribute)【发布时间】：2010-12-0404:18:23【问题描述】：我想问一下指定HTML列宽的更好方法是什么？宽度属... 查看详情

用不同的规则为不同的列控制 html 表格的列宽

】用不同的规则为不同的列控制html表格的列宽【英文标题】：Controllinghtmltablecolumnwidthswithdifferentrulesfordifferentcolumns【发布时间】：2016-11-0410:54:06【问题描述】：我有一个有5列的表格。第一列应该是其最宽内容的宽度。第三、四... 查看详情

如何制作具有固定列宽的 chrome 尊重表

...】：2014-04-1700:08:24【问题描述】：我有一个基本的自制“表格”插件，它支持水平和垂直滚动，在渲染时要固定列宽。所以我们使用CSStable-layout:fixed;但问题是Chrome似乎认为即使计算了表格宽度和列宽，它仍然应该重新格式化表... 查看详情

HTML表格 - 表格宽度100％时保持列宽比例

】HTML表格-表格宽度100％时保持列宽比例【英文标题】：HTMLTable-Maintaincolumnwidthproportionwhentablewidth100%【发布时间】：2018-02-2502:34:42【问题描述】：默认的html&lt;table&gt;元素似乎可以直接设置我想要/期望的列宽。当我尝试将... 查看详情

标题的固定高度和更改宽度（HTML 表格）

】标题的固定高度和更改宽度（HTML表格）【英文标题】：FixedHeightandChangingWidthforHeader(HTMLTable)【发布时间】：2012-04-1605:47:07【问题描述】：我需要确保表格标题的高度是固定的，宽度是根据标题单元格内容调整的。（标题文本最... 查看详情

如何在表格分类器中设置固定表格宽度（不是单元格）？

】如何在表格分类器中设置固定表格宽度（不是单元格）？【英文标题】：Howtosetfixedtablewidth(notcell)intablesorter?【发布时间】：2015-12-2809:50:16【问题描述】：我使用表格排序器。根据表格内容不同的页面（分页）可以有不同的宽... 查看详情

html表格按长度换行

...WRAP:break-word;width:200px;">其中table-layout:fixed表示：列宽由表格宽度和列宽度设定。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。其中word-break:break- 查看详情

具有固定列宽和最大高度的 CSS 表格

】具有固定列宽和最大高度的CSS表格【英文标题】：CSStablewithfixedcolumnwidthsandmaxheight【发布时间】：2019-07-3118:16:25【问题描述】：我正在尝试创建一个具有固定列宽和固定最大高度的表格，它会滚动到最大高度之外。阅读后，我... 查看详情

HTML/CSS 将表格宽度调整为列宽，而不是相反的方式

】HTML/CSS将表格宽度调整为列宽，而不是相反的方式【英文标题】：HTML/CSSadjusttablewidthtocolumnwidthnottheopositeway【发布时间】：2014-02-0415:01:23【问题描述】：如何使列宽停止调整为表格宽度，因为以下代码在呈现时会将列拉伸超过50... 查看详情

如何使用 AutoLayout 配置视图宽度固定宽度和可变高度

】如何使用AutoLayout配置视图宽度固定宽度和可变高度【英文标题】：HowtoconfigureviewwidthfixedwidthandvariableheightwithAutoLayout【发布时间】：2014-04-2422:25:53【问题描述】：我有以下设置：一个UIView包含一个UILabel和一个UIButton。UIButton具... 查看详情

固定表格单元格宽度

】固定表格单元格宽度【英文标题】：FixedTableCellWidth【发布时间】：2011-05-1007:20:59【问题描述】：很多人仍然使用表格来布局控件、数据等——其中一个例子是流行的jqGrid。然而，发生了一些我似乎无法理解的魔法（它的桌子... 查看详情

使 NSView 具有适合内容的固定宽度和可变高度

】使NSView具有适合内容的固定宽度和可变高度【英文标题】：MakeNSViewwithfixedwidthandvariableheightthatfitscontents【发布时间】：2012-11-2111:40:46【问题描述】：我想创建一个宽度固定但高度可变的视图。这意味着视图应根据其内容高度自... 查看详情