正文 

当前位置： 首页 > 源码 >

HTML 表格 - 固定和多变量列宽

     2023-02-16     222

关键词：

【中文标题】HTML 表格 - 固定和多变量列宽【英文标题】：HTML Table - Both fixed and multiple variable column widths 【发布时间】：2014-03-06 06:47:00 【问题描述】：

我必须建立一个有 5 列的表格。表格宽度是可变的（内容宽度的 50%）。一些列包含固定大小的按钮，因此这些列应该具有固定大小，例如 100 像素。有些列中有文本，所以我希望这些列具有可变的列宽。

例如：

Column1: 20% of (tablewidth - sum(fixedwidth_columns))'

第 2 列：100 像素

Column3: 40% of (tablewidth - sum(fixedwidth_columns))

第 4 列：200 像素

Column5: 40% of (tablewidth - sum(fixedwidth_columns))

实现这一目标的最佳方法是什么？

【问题讨论】：

只需在相关的<td> 元素上设置width 属性？ 嗯，不，那样不行。宽度百分比取总表格宽度的百分比，而不是表格宽度 - 固定列。 JSFiddle: jsfiddle.net/M4Et8 看看这个：***.com/questions/7882979/… 【参考方案1】：

我采用了相同的解决方案： 使用 'table-layout:fixed' 并以 percentages 为单位指定 td 的大小。它适用于我的静态内容，但是当我的内容增加时，td 和所有 td 和 tr 都会受到干扰。

解决方案：

经过这么多发现，我想出了以下解决方案，通过这个解决方案，您的单个 表格 将能够显示 不同的列大小 而不会在水平轴上展开.

<table style="table-layout: fixed;">
    <tbody>
        <tr>
            <td colspan="7">
                <span>Record Name</span><br>
                <span>FUNNY FUNNEL CAKES</span>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <span>Event Name</span><br>
                <span>NATIONAL CAKE DAY CELEBRATION</span>
            </td>
            <td colspan="2">
                <span>City</span><br>
                <span>SAN DIEGO</span>
            </td>
            <td colspan="1">
                <span>Zip</span><br>
                <span>92117-4351</span>
            </td>
            <td colspan="1">
                <span>Inspection Type</span><br>
                <span>Routine</span>
            </td>
        </tr>
        <tr>
            <td colspan="6">
                <span>Owner</span><br>
                <span>PATTY CAKE</span>
            </td>
            <td colspan="1">
                <span>Inspection Status</span><br>
                <span>Complete</span>
            </td>
        </tr>
    </tbody>
</table>

【讨论】：

【参考方案2】：

要在表格中固定宽度，您需要将table-layout 属性设置为fixed; 由于你混合了 % 和 px ，它不会连贯。

您可以仅设置 px 宽度，最终设置一个较小的 % 值，并让其他列使用可用的宽度。 例如：http://jsfiddle.net/M4Et8/2/ 

<table style='table-layout:fixed;width:100%' border='1'>
    <tr>
        <th style='width: 20%;'>Column1</th>
        <th style='width: 100px;'>Column2</th>
        <th >Column3</th>
        <th style='width: 200px;'>Column4</th>
        <th >Column5</th>
    </tr>
</table>

【讨论】：

有点晚了，但感谢您的努力，非常感谢。【参考方案3】：

您可以为table 元素设置table-layout: fixed，然后只需在相关&lt;td&gt; 或&lt;th&gt; 元素上设置width 属性：

table 
    table-layout: fixed;

JSFiddle Demo.

来自MDN：

table-layout CSS 属性定义了用于 布局表格单元格、行和列。

价值观：

固定： 表格和列的宽度由table 和col 元素的宽度或第一行单元格的宽度设置。后续行中的单元格不会影响列宽。

【讨论】：

这就是我喜欢 SO 的原因。非常感谢。 很好的答案。太糟糕了，Microsoft Outlook 不理解表格布局...... :( 不过 +1

HTML表格列宽实践

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

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

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

HTML：将表格中的两列设置为比其他列宽固定像素数

】HTML：将表格中的两列设置为比其他列宽固定像素数【英文标题】：HTML:settwocolumnsintablewiderthanothersbyfixednumberofpixels【发布时间】：2018-12-1807:16:27【问题描述】：我有一个包含N列(N&gt;=3)的表，我希望列如下：最左边（第1）列... 查看详情

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

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

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

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

如何获得固定的表格列宽

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

css表格固定列宽

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv=" 查看详情

docx4j导出word文档，有表格，如何固定word表格列宽，

参考技术A选中表格，右击属性，设置一下长宽即可。或者把鼠标移至表格最左上角，出现一个表格形状的小方块，双击更改 参考技术B点击表格-布局-自动调整-固定列宽 查看详情

如果表格只有一行，则 HTML 表格中的列宽会发生变化

】如果表格只有一行，则HTML表格中的列宽会发生变化【英文标题】：ColumnwidthchangesinHTMLtableifthetableonlyhasasinglerow【发布时间】：2021-08-1400:41:16【问题描述】：我有一个一维对象数组。我需要在具有3列的表中显示该数组中的数据... 查看详情

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

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

HTML tbody only 只有一个标题列宽

...HTML有问题。我想制作一个带有固定标题和可滚动正文的表格。主体（tbody）由表格的行组成，头部（thead）由表头组成。重要的是，身体是由Jinja在负载时生成的。这是screenshotofthetable.这就是生成表格的代码的 查看详情

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

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

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

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

基础固定列宽的表格及示例演示(代码片段)

...支持性也很好的CSS属性，但它却很少为人所知。它改变了表格的渲染方式，并生成一个更加稳定可靠的布局。它就是：tabletable-layout:fixed;table-layout的缺省值是auto，这个属性值及其效果大家十分熟悉。对我来说其效果十分的怪异... 查看详情

将 2 个表格列宽相互对齐

】将2个表格列宽相互对齐【英文标题】：align2tablecolumnwidthswitheachother【发布时间】：2012-07-2807:19:30【问题描述】：我有2个表，一个在另一个之上，我想将它们的列宽完全对齐，有没有办法做到这一点？尝试了固定表列宽度等没... 查看详情

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

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

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

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

列宽设置 - HTML 表格

】列宽设置-HTML表格【英文标题】：Columnwidthsetting-HTMLtable【发布时间】：2012-08-1323:14:45【问题描述】：我有一个HTML表格，如http://jsfiddle.net/Lijo/JN8Pm/1/所示。该表由asp.net中的gridview生成。因此，我不能在“tr”中向“td”添加一个... 查看详情