Fit Cell Width to Content

Fit cell width to content

I'm not sure if I understand your question, but I'll take a stab at it:

td {
    border: 1px solid #000;
}

tr td:last-child {
    width: 1%;
    white-space: nowrap;
}

<table style="width: 100%;">
    <tr>
        <td class="block">this should stretch</td>
        <td class="block">this should stretch</td>
        <td class="block">this should be the content width</td>
    </tr>
</table>

Fit content and auto width in HTML table

Use a small value (different from 0) to have the fit-content behavior:

table {
    width: 300px;
    border: 1px solid red;
}

td {
    border: 1px solid blue;
    padding: 0px;
    margin: 0px;
    white-space:nowrap; /* in case you have long content */
}

tr td:nth-child(1) { width: 1px; }
/*tr td:nth-child(2) { width: auto; } not needed */
tr td:nth-child(3) { width: 1px; }
tr td:nth-child(4) { width: 50px; }

tr th:nth-child(1) { width: 1px; }
/*tr th:nth-child(2) { width: auto; } not needed  */
tr th:nth-child(3) { width: 1px; }
tr th:nth-child(4) { width: 50px; }

<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>a a a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<table>

fit width of td to its content

change your css as following :-

tg .tg-ud5c {
    background-color:#efefef;
    text-align:right;
    width:1%;
    white-space: nowrap;
}

Updated fiddle : http://jsfiddle.net/Lk6bf5mm/1/

How to get the td in HTML tables to fit content, and let a specific td fill in the rest

Define width of .absorbing-column

Set table-layout to auto and define an extreme width on .absorbing-column.

Here I have set the width to 100% because it ensures that this column will take the maximum amount of space allowed, while the columns with no defined width will reduce to fit their content and no further.

This is one of the quirky benefits of how tables behave. The table-layout: auto algorithm is mathematically forgiving.

You may even choose to define a min-width on all td elements to prevent them from becoming too narrow and the table will behave nicely.

table {    table-layout: auto;    border-collapse: collapse;    width: 100%;}table td {    border: 1px solid #ccc;}table .absorbing-column {    width: 100%;}

<table>  <thead>    <tr>      <th>Column A</th>      <th>Column B</th>      <th>Column C</th>      <th class="absorbing-column">Column D</th>    </tr>  </thead>  <tbody>    <tr>      <td>Data A.1 lorem</td>      <td>Data B.1 ip</td>      <td>Data C.1 sum l</td>      <td>Data D.1</td>    </tr>    <tr>      <td>Data A.2 ipsum</td>      <td>Data B.2 lorem</td>      <td>Data C.2 some data</td>      <td>Data D.2 a long line of text that is long</td>    </tr>    <tr>      <td>Data A.3</td>      <td>Data B.3</td>      <td>Data C.3</td>      <td>Data D.3</td>    </tr>  </tbody></table>

Table column width equal to content width

You will want to set the column that you want the extra width to go into to have its with of 100%. This won't actually make it a true 100%, it will just force it to be a big as possible. This will make other columns wrap though to fit that need so make sure you set the white space property to no wrap.

The CSS

.table {
    width:100%;
    white-space: nowrap;
}
.nameCol {
    width:100%;
}
.table td {
    padding: 0 5px;
}

The HTML

<table class="table">
    <thead>
        <tr>
            <th class="nameCol">Name</th>
            <th>Price</th>
            <th>Order Dat</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cakes</td>
            <td>100 $</td>
            <td>2015-01-09</td>
        </tr>
        <tr>
            <td>Clouthing for Sping</td>
            <td>20000 $</td>
            <td>2015-02-09</td>
        </tr>
    </tbody>
</table>

Fiddle to see it in action: https://jsfiddle.net/q16dp8ja/1/

Additional notes, I also added some left right padding for readabilities sake since the columns will now be narrower on the right, also you should pick a different class than .table as it can be easily confused with table the element selector.

mat-table auto fit column width to bigger content

You've probably solved this by now, but posting here for anyone else who might come across this.

I used this for reference:
https://github.com/angular/material2/issues/5808

It's not an auto-sizing column, but this is how you set widths on specific mat-tablecolumns (the contents wrap by default):

mat-cell:nth-child(1),mat-header-cell:nth-child(1) {    flex: 0 0 30%;}
mat-cell:nth-child(5),mat-header-cell:nth-child(5) {    flex: 0 0 10%;}

---

Related Topics