如何将含动态数据库内容的特定TD元素宽度设为内容宽度？

It sounds like you’re trying to get a specific <td> element to shrink exactly to the width of its dynamic database content—even though your parent table has a fixed 600px width. No worries, there are a few straightforward solutions depending on how you want the content to behave:

Solution 1: Prevent Wrapping (Keep Content on One Line) #

If you don’t want the content in the target cell to wrap, use white-space: nowrap to ensure the cell only takes up the width of the longest unbroken line. This works seamlessly with the default table layout (table-layout: auto):

Add this CSS class:

/* Target cell that should fit its content */
.content-fit {
  white-space: nowrap;
  width: auto; /* Explicitly set to auto (default, but clarifies intent) */
}

Apply it to your <td>:

<td class="debug1 content-fit">Your dynamic content here</td>

The rest of the table cells will automatically expand to fill the remaining 600px width of the table.

Solution 2: Allow Wrapping (Fit to Maximum Line Width) #

If you want the content to wrap but the cell to only be as wide as the longest line (not stretched), use width: fit-content (supported in all modern browsers). This tells the cell to size itself exactly to its content:

.content-fit {
  width: fit-content;
  min-width: 0; /* Prevents unexpected overflow in edge cases */
}

Solution 3: Fix Table Layout Issues #

If your table is using table-layout: fixed (which forces columns to fixed widths), you’ll need to switch back to the default auto layout so the browser can adjust column widths based on content:

table {
  table-layout: auto; /* Let browser calculate column widths dynamically */
  width: 600px;
  border: solid black 1px;
}

Bonus: Ensure Other Cells Behave #

If other cells have long content that’s pushing the target cell wider, add word-wrap: break-word to those cells to let them wrap and take the remaining space:

/* For other cells that should fill remaining table space */
.fill-space {
  word-wrap: break-word;
}

Testing these with your dynamic data should ensure the target <td> always matches its content width, while the rest of the table maintains its fixed 600px width.

内容的提问来源于stack exchange，提问作者Nulik