0

I want that a table column uses the minimum of place but after a certain width, it should wrap.
Here is what I have: 

<table id="#table">
    <tr>
        <td>Content with a fix with</td>
        <td class="min">This content should only use the necessary place but wrap after 200px</td>
    </tr>
</table>

<style>
#table{
     width: 100%;
}
.min {
    width: 1%;
    white-space: nowrap;
}
</style>

This makes the column use only the place which it needs but it it ets too long, it will make the table endless longer and I want to set the maximum of the allowed space.

Edit: I think that with js it would be possible to calculate the width and change the css but I would prefer a solution without javascript or jquery.

Edit 2: I forgot to mention that the table has a width of 100%. So if I follow the given answer, the table cell has its autowidth (which is too wide) and a max-width so if the text is short, the td has a white space which I do not want.

Edit 3: Here is an image which explains better than me. enter image description here

#billTable{
    width:100%;
}
#numberTd{
    text-align: center;
    width:18%;
}
#weightTd{
    text-align: center;
    width:20%;
}
#nameTd{
    text-align: left;
    width: 1%;
    white-space: nowrap;
}
#kgPriceTd{
    text-align: right;
    width:20%;
}
#priceTd {
    text-align: right;
}
<div style="width:550px;">
    <table>
        <tr>
            <th id='numberTd'>Packetzahl</th>
            <th id='weightTd'>Kg</th>
            <th id='nameTd'>Artikel</th>
            <th id='kgPriceTd'>CHF / Kg</th>
            <th id='priceTd' colspan="2">Total</th>
        </tr>
        <tr>
            <td id='numberTd'>1</td>
            <td id='weightTd'>0.688</td>
            <td id='nameTd' class='min'>Siedfleisch</td>
            <td id='kgPriceTd'>44.00</td>
            <td id='priceTd'>8.2</td>
        </tr>
    </table>
</div>
Samuel Gfeller
  • 840
  • 9
  • 19

2 Answers2

2

You can control max width of an element by using max-width

https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.

.min {

        max-width: 200px;
    }
<table>
    <tr>
        <td>Content with a fix with</td>
        <td class="min">This content should only use the necessary place but wrap after 200px</td>
    </tr>
</table>

You can apply width in percentages for the flexible columns, space it out so it looks good or make your table not 100%

Huangism
  • 16,278
  • 7
  • 48
  • 74
  • @SamuelGfeller With your table being 100%. What do you expect to happen with the extra space between the cells? – Huangism Mar 12 '18 at 19:26
  • I need the table for the bill list of articles so it is tabular data Everything has to be beautiful for the print thats why I need so exact dimentions. Ideally the extra space should go to another td where the width can be wider. – Samuel Gfeller Mar 12 '18 at 20:06
  • @SamuelGfeller well then this issue doesn't exist if you have enough TDs. If you don't have enough cells to fill a row then check my update – Huangism Mar 12 '18 at 20:08
  • I'm not so good in explaining my problem but I will try to show it with an image. I'll post an update in my question soon – Samuel Gfeller Mar 12 '18 at 20:17
  • Try to provide an example that shows the problem in full – Huangism Mar 12 '18 at 20:19
  • I uploaded the pics – Samuel Gfeller Mar 12 '18 at 20:39
  • the blue content is only the minimum width thanks to: `1%; white-space: nowrap;` which I saw [here](https://stackoverflow.com/questions/26983301/how-to-make-a-table-column-be-a-minimum-width). With this I would need something like `if (width == 200px){ whitespace: wrap }` – Samuel Gfeller Mar 12 '18 at 20:45
  • @SamuelGfeller can't you just give the columns a width in percentages? Please paste code not pictures of code. Just view source and copy. In this situation, you should just be setting width using % for the flexible columns because your table is 100% and your cells are going to stretch, You just need to make sure the table looks good when it does – Huangism Mar 12 '18 at 20:48
  • Sorry.. is the Snippet enaught? Thank you for your help and patience – Samuel Gfeller Mar 12 '18 at 21:00
  • @SamuelGfeller I see you have a div wrapping the table with width 550, will this always be there? – Huangism Mar 13 '18 at 12:40
  • Yes like I said it's for a bill print and the table has to fit exactly to the a4 page so there will be a div around it with a fixed width. 550 was an example to show that it is wrapped by a div. But its way more complicated as I taught and I will just give a limit of chars for the "article" so the problem is solved – Samuel Gfeller Mar 13 '18 at 13:40
  • Ok sorry there is so much I can do from here – Huangism Mar 13 '18 at 16:03
  • What do you mean? – Samuel Gfeller Mar 13 '18 at 16:50
  • @SamuelGfeller I don't know the extend of the complication and I don't think it is possible to explain the entire situation and you said the problem is now solved – Huangism Mar 13 '18 at 19:09
1

Use the CSS property "max-width". I've attached an example with a border that shows this in use.

  table, td {
    border:1px solid #555;
    border-collapse:collapse;
  }
  .min {  
    max-width:200px;
  }
<table>
    <tr>
        <td>Content with a fix with</td>
        <td class="min">This content should only use the necessary place but wrap after 200px</td>
    </tr>
</table>
hypern00b
  • 340
  • 1
  • 10