Set the table column width constant regardless of the amount of text in its cells?

问题

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?

回答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, it is useful to set the overflow property to hidden to prevent any extra text from coming out of the table.

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

Ok so here's what I have:

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>

Here it is in 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/

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

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

table-layout:fixed;

回答6:

What I do is:

Set the td width:

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

Set the td width with CSS:
```
<td style="width:200px; height:50px;">
```

Set the width again as max and min with 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:

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

.special_column { width: 120px; }

HTML:

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

回答10:

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

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

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

回答12:

As per my answer here, it is also possible to use a table head (which can be empty) and apply relative widths for each table head cell. The widths of all cells in the table body will conform to the width of their column head. Example:

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

View Result

Alternatively, use colgroup as suggested in Hyathin's answer.

回答13:

Setting this:

style="min-width:100px;"

Worked for me.

回答14:

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

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

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

回答15:

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

来源：https://stackoverflow.com/questions/4457506/set-the-table-column-width-constant-regardless-of-the-amount-of-text-in-its-cell

标签

html

css

column-width