正文 

当前位置： 首页 > 知识 >

如何在 HTML 中为表格内的列提供固定宽度？

     2023-03-11     318

关键词：

【中文标题】如何在 HTML 中为表格内的列提供固定宽度？【英文标题】：How to give fixed width for the columns inside table in HTML? 【发布时间】：2017-03-30 05:23:03 【问题描述】：

P.S : 请在阅读整个问题之前不要将其标记为重复

我有一个table，我想为columns 提供固定宽度，因为我想动态显示它们。 table 的宽度为 100%。所以在那table中，只能显示1列或3或6等。但问题是，如果在一个场景中我只有 1 列，那么该表中的数据占据整个 100% table，即使我已经为该列指定了固定宽度。无论表格宽度如何，我都希望列宽固定。请指导我哪里错了。下面是我一直在尝试的代码。

table 
  table-layout: fixed;
  word-break: break-all;

table td 
  border: 1px solid;
  overflow: hidden;

<table  cellspacing='0' cellpadding='0'>
  <col  />
  <col  />
  <col  />

  <tr>
    <th>First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>

  </tr>
  <tr>
    <td>Text 1</td>
    <td>text 2</td>
    <td>text 3</td>

  </tr>
</table>

【问题讨论】：

您不需要表格布局。只需将 div 与 float:left 一起使用。因为你有固定的宽度。 @Mr_Green ：但问题是数据占据了整个 100% 的表格，即使我给出了 100 像素或 50 像素左右的固定宽度 这是因为您使用的是表。这里不需要表格布局。 @Shirish：您遇到了表格宽度“100%”的问题。您可以使用固定宽度（即 400 像素）而不是使用百分比来解决此问题。 这些宽度是相对于彼此计算的。所以100、50 和50 表示第二个和第三个是第一个宽度的一半。例如28、14 和14 将给出相同的结果，将px 切换为% 或pt 或任何无关紧要的东西（使用浮点值时似乎存在一些舍入错误或table_width:100%，仅此而已）。所有组合的列将始终填充整个表格，这正是表格的设计方式。 【参考方案1】：

在表格末尾添加隐藏列。

表格将是 100% 宽度，并且调整隐藏列的大小比调整页面大小。

代码示例：

table
    
        table-layout: fixed;
        word-break: break-all;
        border-collapse: collapse;
        width:100%;
    
td
    
        height:50px;
        border: 1px solid;
    
th
    
        height:50px;
        border: 1px solid;
    
.F
    
        width:100%;
        border:none;
        border-left:1px solid;
    
<table>
      <col width='200px' />
      <col width='100px' />
      <col width='50px' />
      <tr>
            <th>First Column</th>
            <th>Second Column</th>
            <th>Third Column</th>
            <th class='F'></th>
      </tr>
      <tr>
            <td>Text 1</td>
            <td>text 2</td>
            <td>text 3</td>
            <td class='F'></td>
      </tr>
</table>

【讨论】：

我为你的努力投了赞成票。但是，如果我使用 cols 来定义列的宽度，它将不起作用。试过了。 您可以使用 cols 定义宽度。如果您在表格末尾留下隐藏列，它可以工作（经过测试）。 我使用 cols 尝试了相同的代码，但对我来说它不起作用。您能否修改您的答案。如果成功了，我会接受你的回答。 如果使用 cols，您必须从 CSS 中删除宽度参数。完成，代码更新 接受 :).. 谢谢哥们 :)【参考方案2】：

这是完整的代码。

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th 
border: 1px solid black;
 

 table 
  border-collapse: collapse;
  width: 100%;
   

th 
height: 50px;
 
</style>
</head>
<body>

  <h2>The width and height Properties</h2>
  <p>Set the width of the table, and the height of the table header row:</p>

  <table>
<tr>
  <th>First Column</th>
  <th>Second Column</th>
  <th>Third Column</th>
 </tr>
 <tr>
  <td>Text 1</td>
  <td>Text 2</td>
  <td>Text 3</td>
  </tr>

  </table>

 </body>
 </html>

【讨论】：

从表中删除一列会使另一个 td 占据整个宽度。不工作的兄弟。 请告诉我你的完整问题你想达到什么目的？ 根据您上面的代码，如果我要删除任何列，其他 2 个 tds 的宽度不应调整为表格的宽度。 如果你删除列，你也需要删除它的行。【参考方案3】：

这是一种略有不同的方法。在此示例中，它将采用自动宽度表，然后固定宽度和列宽。我发现这很有用，我有一个自动宽度表，我想在不调整表大小的情况下进行过滤。

此示例在格式良好的表格中使用col 和th 元素。

添加了fixed类的使用，方便重置表格。

/*jQuery - mistajolly - fix table widths*/
var table = $(this);
if(!table.hasClass('fixed'))
    table.width(table.outerWidth(true));
    table.addClass('fixed');
    var cols = table.find('col');
    table.find('th').each(function(index)
        $(cols[index]).width($(this).outerWidth(true)).addClass('fixed');
    );


/* Reset and remove fixed widths */
if(table.hasClass('fixed'))
    table.removeClass('fixed').css('width','');
    table.find('.fixed').each(function(index)
        $(this).removeClass('fixed').css('width','');
    );

【讨论】：

如何对我的表格进行 CSS 处理，使最右边的列贴在右边，宽度可变

】如何对我的表格进行CSS处理，使最右边的列贴在右边，宽度可变【英文标题】：HowtoCSSmytablesothatthemostrightcolumnstucktotheright,withvariablewidth【发布时间】：2019-11-0213:41:54【问题描述】：我有一个100%宽度的表格，我希望最右边的列(D... 查看详情

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

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

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

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

如何设置html页面自适应宽度的table(表格)（一）

...度比列幅宽的半角字符时，td的宽度会被内容撑破，应该如何解决呢？解决此问题的方法是：在明细行的td中，追加style="word-wrap:break-word;"，这样做可以使半角连续字符强制换行，不至于撑破列宽。例：……应用此方法，... 查看详情

如何在引导选择选择器中为选项（下拉菜单）设置固定宽度

】如何在引导选择选择器中为选项（下拉菜单）设置固定宽度【英文标题】：HowcanIsetfixedwidthforoptions(dropdown)inbootstrapselectpicker【发布时间】：2018-11-2807:29:35【问题描述】：这是代码<selectclass="selectpickerform-control"data-live-search="tru... 查看详情

如何设置html页面自适应宽度的table(表格)（一）

将所有列设置为固定宽度，显然是不能满足此类要求的，但是若把全部的列都设置为百分比，恐怕在某些尺寸，或分辨率下，会变得很难看。在Bigtree看来，比较习惯于用如下的方式来处理——在表格列数不是很多的前提下——... 查看详情

css固定html表格的宽度

...果里面的数据太长的话，就会错位成下面这个样子：我们如何保证抽奖时间固定 查看详情

如何使用 CSS flexbox 设置固定宽度的列

】如何使用CSSflexbox设置固定宽度的列【英文标题】：HowtosetafixedwidthcolumnwithCSSflexbox【发布时间】：2015-07-0506:55:56【问题描述】：CodePen：http://codepen.io/anon/pen/RPNpaP.我希望红色框在并排视图中只有25em宽-我试图通过在此媒体查询中... 查看详情

固定表格单元格宽度

...法理解的魔法（它的桌子大声喊叫，可能有多少魔法？）如何设置表格的列宽并让它像jqGrid一样服从！？如果我尝试复制这个，即使我设置了每个&lt;tdstyle=\'width:20px\'& 查看详情

表格布局：固定忽略 td 的最小宽度

...个包含固定宽度和灵活宽度列的表格。无论浏览器的宽度如何，某些列的宽度始终需要为80像素。其余的列需要是灵活的宽度，但都是等宽，最小宽度为75px；通过添加table-layout:fixed;到表格我可以让灵活的宽度cols都具有相 查看详情

如何使用 QPlaintTextEdit 高效地创建固定宽度的列记录器？

】如何使用QPlaintTextEdit高效地创建固定宽度的列记录器？【英文标题】：HowtoefficientlycreateafixedwidthcolumnloggerusingQPlaintTextEdit?【发布时间】：2015-06-1217:06:50【问题描述】：我想使用QPlainTextEdit在Qt(4.8)中创建一个日志窗口。这意味着... 查看详情

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

...标题单元格内容调整的。（标题文本最多显示两行）我们如何使用样式来做到这一点？另外，我想确保表格行的宽度与标题行的宽度相同（即标题行决定宽度）。注意：目前“TransactionDep 查看详情

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

】HTML表格-固定和多变量列宽【英文标题】：HTMLTable-Bothfixedandmultiplevariablecolumnwidths【发布时间】：2014-03-0606:47:00【问题描述】：我必须建立一个有5列的表格。表格宽度是可变的（内容宽度的50%）。一些列包含固定大小的按钮，... 查看详情

在一行上固定多个表格的宽度

】在一行上固定多个表格的宽度【英文标题】：Fixingthewidthonmultipletablesononeline【发布时间】：2012-10-3106:59:33【问题描述】：我有多个表格显示为内联块元素。但是，我想修复宽度，以便它们超出水平空间，为每个表提供33%的宽度... 查看详情

如何在 Flutter 中创建具有固定列的水平滚动表格？

】如何在Flutter中创建具有固定列的水平滚动表格？【英文标题】：HowtocreateahorizontallyscrollingtablewithfixedcolumninFlutter?【发布时间】：2019-11-1809:44:10【问题描述】：我想创建一系列可以垂直滚动的表格，每个表格的行数/列数可能不... 查看详情

html表格table的宽度超出页面宽度时如何不改变table宽度（只显示出滚动条）？

问题如题。条件是不能将table的宽度设置为固定值，因为table包含的列数可能每次查询都不同，可能只有一二列，也可能有几十列，要求每一列宽度能够显示其表格的内容（即列的宽度按内容长度显示），如果table宽度没有超出页... 查看详情

html如何在css里设置table的个个列的固定宽度

设置每个单元格的线宽，tabletdwidth:1px，单独设一列的话（行是tr），需要给对应的列加选择器，常用的有class,id。然后class为.类名｛width:1px｝,id为#id名width:1px参考技术Atable td     height: 50px; 查看详情

React-Table 列固定宽度破坏了整个表格

】React-Table列固定宽度破坏了整个表格【英文标题】：React-Tablecolumnfixedwidthspoilswholetable【发布时间】：2018-03-0822:22:24【问题描述】：有人可以向我解释一下为什么我不能在FirstName列上设置固定宽度吗？它设置了传递的宽度，但它... 查看详情