How to Auto Resize HTML Table Cell to Fit The Text Size

How to Auto resize HTML table cell to fit the text size

If you want the cells to resize depending on the content, then you must not specify a width to the table, the rows, or the cells.

If you don't want word wrap, assign the CSS style white-space: nowrap to the cells.

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>

Resize an HTML Table Forcing All Columns to Stay in View

The following CSS changes will:

• Keep the text in each cell on a single line
• Show an ellipsis when the content of a cell is wider than the cell
• When hovered, the ellipsis will disappear and the content becomes scrollable

The important CSS properties are:

table {
  width: 100%;
  table-layout: fixed;
}

th, td {
  white-space: nowrap;
  overflow-x: scroll;
  text-overflow: ellipsis;
}

th:hover,
td:hover {
  text-overflow: clip;
}

Here's an example, though the layout of SO doesn't showcase the scrolling feature due to the width. For a working example, see this Codepen demo and resize your screen until the table cells become too narrow to show the content.

table {  border-collapse: collapse;  width: 100%;  max-width: 100%;  table-layout: fixed;}th,td {  border: 1px solid #ccc;  white-space: nowrap;  overflow-x: scroll;  text-overflow: ellipsis;}th:hover,td:hover {  text-overflow: clip;}

<table>  <thead>    <th>First First First First First</th>    <th>Second Second Second Second Second</th>    <th>Third Third Third Third Third</th>    <th>Fourth Fourth Fourth Fourth Fourth</th>  </thead>  <tr>    <td>First First First First</td>    <td>Second Second Second Second</td>    <td>Third Third Third Third Third</td>    <td>Fourth Fourth Fourth</td>  </tr>  <tr>    <td>First First First First</td>    <td>Second Second Second Second</td>    <td>Third Third Third Third Third</td>    <td>Fourth Fourth Fourth</td>  </tr>  <tr>    <td>First First First First</td>    <td>Second Second Second Second</td>    <td>Third Third Third Third Third</td>    <td>Fourth Fourth Fourth</td>  </tr></table>

Resize table-cell to fit text

This is because of the default padding of text/ font. you can try adding in your css :

table.header_left a.title1 { 
   line-height:15px; 
   float: left;
}

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>

How to make a lot of text fit inside html table cell

Try to use [word-wrap: break-word] in your td

td {
  word-wrap: break-word
  width: 200px;
}

---

Related Topics