设置表列宽度常量，而不考虑其单元格中文本的数量?

In my table I set the width of the first cell in a column to be 100px.
However, when the text in one of the cell in this column is too long, the width of the column becomes more than 100px. How could I disable this expansion?

在表中，我将列中的第一个单元格的宽度设置为100px。但是，当该列中的一个单元格中的文本太长时，该列的宽度将超过100px。我如何禁用这个扩展?

13 个解决方案

#1

I played with it for a bit because I had trouble figuring it out.

我玩了一会儿，因为我搞不清楚。

You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed. For some reason, the cell width seems to only stay fixed if the table width is set, too (i think that's silly but whatev). Also useful is setting the overflow property to hidden.

您需要设置单元格宽度(无论是th还是td，我都设置了)并将表布局设置为fixed。由于某些原因，单元格宽度似乎只有在设置了表宽度的情况下才会保持不变(我认为这很愚蠢，但不管怎样)。同样有用的是设置溢出属性隐藏。

You should make sure to leave all of the bordering and sizing for CSS, too.

您应该确保也保留CSS的所有边界和大小。

Ok so here's what I have.

这是我的。

html:

html:

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

CSS:

CSS:

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

th, td {
    border: 1px solid black;
    width: 100px;
}

Here it is in JSFiddle

在JSFiddle

This guy had a similar problem: Table cell widths - fixing width, wrapping/truncating long words

这个人有一个类似的问题:表格单元格宽度——固定宽度，封装/截断长字

#2

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

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

After the table tag, use the col element. you don't need a closing tag.

在表标记之后，使用col元素。你不需要结束标签。

For example, if you had three columns:

例如，如果你有三个栏目:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

#3

Just add <div> tag inside <td> or <th> define width inside <div>. This will help you. Nothing else works.

只需要在或中添加

标签

中定义宽度。这将帮助你。没有其他的工作。

eg.

如。

<td><div style="width: 50px" >...............</div></td>

#4

If you need one ore more fixed-width columns while other columns should resize, try setting both min-width and max-width to the same value.

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

#5

You need to write this inside the corresponding CSS

您需要在相应的CSS中编写这个

table-layout:fixed;

#6

What I do is:

我所做的是:

1. Set the td width:

   设置td宽度:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>
   

2. Set the td width with CSS:

   用CSS设置td宽度:

   <td style="width:200px; height:50px;">
   

3. Set the width again as max and min with CSS:

   再次设置宽度为max和min的CSS:

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">
   

It sounds little bit repetitive but it gives me the desired result. To achieve this with much ease, you may need put the CSS values in a class in your style-sheet:

听起来有点重复，但它给了我想要的结果。要轻松实现这一点，您可能需要将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*/   
}

then:

然后:

<td class="td_size">

Place the class attribute to any <td> you want.

将类属性放置到任何想要的。

#7

I used this

我用这个

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

.app_downloads_table tr td:last-child {
    text-align: center;
}

#8

It also helps, to put in the last "filler cell", with width:auto. This will occupy remaining space, and will leave all other dimensions as specified.

它也有助于，放入最后的“填充单元”，宽度:自动。这将占用剩余的空间，并将保留指定的所有其他维度。

#9

If you don't want a fixed layout, specify a class for the column to be size appropriately.

如果您不想要固定布局，请为该列指定一个适当大小的类。

CSS:

CSS:

.special_column { width: 120px; }

HTML:

HTML:

<td class="special_column">...</td>

#10

KAsun has the right idea. Here is the correct code...

KAsun的想法是对的。这是正确的密码……

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<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>

#11

Make the accepted answer respond for small screens when smaller than the fixed width.

当小屏幕的宽度小于固定的宽度时，对小屏幕做出响应。

HTML:

HTML:

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

CSS

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

JS小提琴

https://jsfiddle.net/w9s3ebzt/

https://jsfiddle.net/w9s3ebzt/

#12

I found KAsun's answer works better using vw instead of px like so:

我发现KAsun的答案用vw更好，而不是px这样:

<td><div style="width: 10vw" >...............</div></td>

< td > < div风格= "宽度:10大众" > ............... < / div > < / td >

This was the only styling I needed to adjust the column width

这是调整列宽度所需的惟一样式

#13

You don't need to set "fixed" - all you need is setting overflow:hidden since the column width is set.

您不需要设置“固定”——您所需要的只是设置溢出:由于设置了列宽而隐藏。