设置表格的列宽不变，而不考虑其单元格中的文本量？

在我的表格中，我把一列中第一个单元格的宽度设定为100px。<br /&gt。 然而，当这一列中的一个单元格的文字太长时，这一列的宽度就会超过`100px'。我怎样才能禁止这种扩展？

Valeriu
56173
已编辑的问题 23日 九月 2021 в 1:16
Brian Tompsett - 汤莱恩
已编辑的问题 16日 六月 2017 в 7:58
编程
html css column-width
16日 十二月 2010 в 4:44
32 种观点
对该问题的评论 (4)
解决办法

我玩了一会儿，因为我很难搞清楚它。

你需要设置单元格的宽度（无论是th还是td，我都设置了），并将table-layout设置为fixed。由于某些原因，只有在设置了表格宽度的情况下，单元格的宽度才会保持固定（我认为这很傻，但无所谓）。

另外，将 "溢出 "属性设置为 "隐藏 "也很有用，可以防止任何额外的文本从表格中流出。

你应该确保把所有的边框和大小都留给CSS。

好了，这就是我的情况。

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}
<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>
Valeriu
56173
编辑本段答案23日 九月 2021 в 1:16
daaawx
编辑本段答案24日 三月 2019 в 3:46
评论(8)

见。 http://www.html5-tutorials.org/tables/changing-column-width/

在table标签之后，使用col元素。 你不'需要一个结束标签。

例如，如果你有三列。

<table>





  <tbody>
    ...
  </tbody>
</table>
vanthome
编辑本段答案6日 三月 2014 в 4:01
评论(7)

只要在<td>里面加上<div>标签，或者在<div>里面定义宽度。 这将帮助你。 其他的都不行。

例如：{{8044757}}。

<td><div style="width: 50px" >...............</div></td>
评论(3)

如果你需要一个或多个固定宽度的列，而其他列应该调整大小，请尝试将 "最小宽度 "和 "最大宽度 "设置为相同的值。

评论(2)

你需要在相应的CSS里面写上这个

table-layout:fixed;
评论(3)

我所做的是

  1. 设置td宽度。

<td width="200" height="50"><！--blaBlaBla内容在此--></td&gt。

  1. 用CSS设置td的宽度。

<td style="width:200px; height:50px;"&gt。

  1. 再用CSS设置宽度为最大和最小。

<td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; 2.再用CSS设置宽度为最大和最小：<td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px。 width:200px; height:50px;"&gt。

这听起来有点重复，但它给我带来了理想的结果。 要想轻松实现这个目标，你可能需要将CSS值放在样式表的一个类中。

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

然后，

<td class="td_size">

将类属性放到任何你想要的<td>。

评论(1)

我用了这个

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}
评论(2)

在最后的"填充单元格"中加入width:auto也有帮助。 这将占用剩余的空间，并将所有其他尺寸保持在指定的位置。

评论(0)

设置这个。

style="min-width:100px;"

对我来说很有用

Jack Bashford
编辑本段答案30日 五月 2019 в 9:08
评论(0)

如果你不希望有一个固定的布局，可以为列指定一个类，使其尺寸合适。

CSS。

.special_column { width: 120px; }

HTML。

<td class="special_column">...</td>
评论(1)

根据我的回答这里，也可以使用表头 (可以是空的)，并为每个表头单元格应用相对宽度。 表体中所有单元格的宽度将符合其列头的宽度。 例子：HTML

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

查看结果</b&gt。

或者，使用 Hyathin'答案中建议的colgroup。

评论(0)

KAsun的想法是正确的。 这里是正确的代码...


  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }


<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>
评论(1)

当小于固定宽度时，使接受的答案响应于小屏幕。

HTML。

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS Fiddle

https://jsfiddle.net/w9s3ebzt/

Willy Richardson
编辑本段答案3日 六月 2017 в 2:48
评论(0)

我发现KAsun'的答案用vw代替px效果更好，像这样。

`<div style="width: 10vw"

............

`。

这是我唯一需要调整列宽的样式。

user3229980
编辑本段答案19日 九月 2016 в 12:54
评论(0)

你不需要设置"fixed"--你需要的只是设置overflow:hidden，因为列宽已经设置好了。

评论(1)