如何为<td>内的<img>添加内联CSS样式？或通过<td>内联样式控制？

Hey there! Let's tackle your two questions about table image styling for your rich text editor—super common scenario when building cross-site compatible content!

1. How to apply td img { max-width:100%; height:auto; } using inline CSS #

Since inline CSS only applies directly to the element it’s attached to (you can’t use descendant selectors like td img in inline styles), the most reliable way to get this effect is to add the style directly to each <img> tag inside your table cells. This ensures the style sticks no matter what external CSS is present on the sites rendering your HTML.

Here’s what that looks like in practice:

<table>
  <tr>
    <td>
      <img src="your-image-url.jpg" alt="Descriptive alt text" style="max-width:100%; height:auto;">
    </td>
  </tr>
</table>

This inline style will override most external CSS rules (thanks to inline style specificity), so your images will always scale properly with the table cell width across different sites.

2. Can you control child elements (like <img>) using inline styles on <td>? #

Short answer: No, not directly. Inline style attributes only affect the element they’re written on—they don’t support targeting child elements with selectors. So adding style="..." to a <td> will only style the cell itself (e.g., padding, background color, text alignment), not any <img> or other elements inside it.

That said, there’s a workaround using CSS custom properties (variables) if you want to centralize some style values at the <td> level:

<table>
  <tr>
    <td style="--img-max-width:100%; --img-height:auto;">
      <img src="your-image-url.jpg" alt="Descriptive alt text" style="max-width:var(--img-max-width); height:var(--img-height);">
    </td>
  </tr>
</table>

This lets you define the values once on the <td> and reference them in the <img>’s inline style. It’s a bit cleaner if you have multiple images in the same cell, but you still need to add the inline style to each <img> to pull in the variables.

For your use case (cross-site rendering with consistent styles), sticking to direct inline styles on each <img> is the simplest and most foolproof approach—no reliance on external stylesheets or browser support for variables.

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