CSS Table Column Autowidth

CSS table column autowidth

The following will solve your problem:

td.last {
    width: 1px;
    white-space: nowrap;
}

Flexible, Class-Based Solution

And a more flexible solution is creating a .fitwidth class and applying that to any columns you want to ensure their contents are fit on one line:

td.fitwidth {
    width: 1px;
    white-space: nowrap;
}

And then in your HTML:

<tr>
    <td class="fitwidth">ID</td>
    <td>Description</td>
    <td class="fitwidth">Status</td>
    <td>Notes</td>
</tr>

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

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>

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

CSS how to make table's column width less than the content?

You may give it a try with max-width instead.

disclaimer: unsure if all browsers will take it

.table {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    table-layout: fixed; 
}

td, th {
    border: 1px solid black;
    padding: 5px 8px;
}

td:first-child, th:first-child {
    max-width: 10px;
    overflow: hidden;
    white-space: nowrap;
}

<table class="table">
    <thead>
        <tr>
            <th class="col1">col1</th>
            <th class="col2">col2</th>
            <th class="col3">col3</th>
            <th class="col4">col4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col1">aaaaaa</td>
            <td class="col2">aaaaaa</td>
            <td class="col3">aaaaaa</td>
            <td class="col4">aaaaaa</td>
        </tr>
    </tbody>
</table>

---

Related Topics