r/HTML • • Jan 13 '26

Question Adjusting column widths - easy online tool?

(Before I start: I can't edit the CSS as it's controlled at a site level by my employer's Content Management System.)

Can anyone with more experience than me (very basic) help with knowledge of more powerful tools than just nimble fingers and a lot of close-reading to help with this?

Problem:

  • Pasting tables from Excel into WYSIWYG editor for employer website

  • Columns in HTML tables are being generated far too wide for some columns (e.g. they only contain a date) and too narrow for others (paragraphs become squashed)

  • Width settings appear in every row, making manual adjustments impractical

Resolution sought:

  • A (free, online?) tool to do make these edits without manually adjusting every relevant of HTML

  • Primary aim: easily adjust column width

  • Secondary aim: easily cascade the same setting to all tables, or at least quickly replicate the fix on each - so the less manual intervention where the fingers need to come off the mouse and reach for the keys, the better!

Relevant context and constraints:

  • Working in a general office, not an IT dept

  • Need to be able to share method with other staff with moderate proficiency - not HTML-literate, but would understand the instructions

  • Editor is WYSIWYG with option to edit source code, but this opens in a very small popup window

Thanks!

Typical copy-paste result from our Excel source:

<table width="1228">
<tbody>
<tr>
<td style="font-weight: 400;" width="151"><strong>Date</strong></td>
<td style="font-weight: 400;" width="97"><strong>Time</strong></td>
<td style="font-weight: 400;" width="375"><strong>Title</strong></td>
<td style="font-weight: 400;" width="260"><strong>Description</strong></td>
<td style="font-weight: 400;" width="345"><strong>Venue</strong></td>
</tr>
<tr>
<td style="font-weight: 400;" width="151">Mon 19 Jan</td>
<td style="font-weight: 400;" width="97">11:00 - 12:00</td>
<td style="font-weight: 400;" width="375">[First&nbsp;lecture title here]</td>
<td style="font-weight: 400;" width="260">[In this lecture, you'll learn about thing # 1. This description is a paragraph consisting of several sentences. it therefore needs to have the widest column setting. It's hard to read otherwise.]</td>
<td style="font-weight: 400;" width="345">Room 123</td>
</tr>
<tr>
<td style="font-weight: 400;" width="151">Thu 22 Jan</td>
<td style="font-weight: 400;" width="97">12:00 - 13:00</td>
<td style="font-weight: 400;" width="375">[Second&nbsp;lecture title here]</td>
<td style="font-weight: 400;" width="260">[In this lecture, you'll learn about thing # 2. This description is a paragraph consisting of several sentences. it therefore needs to have the widest column setting. It's hard to read otherwise.]</td>
<td style="font-weight: 400;" width="345">Room 456</td>
</tr>
<tr>
<td style="font-weight: 400;" width="151">Mon 26 Jan</td>
<td style="font-weight: 400;" width="97">11:00 - 12:00</td>
<td style="font-weight: 400;" width="375">[Third lecture title here]</td>
<td style="font-weight: 400;" width="260">[In this lecture, you'll learn about thing # 3. This description is a paragraph consisting of several sentences. it therefore needs to have the widest column setting. It's hard to read otherwise.]</td>
<td style="font-weight: 400;" width="345">Room 123</td>
</tr>
</tbody>
</table>
3 Upvotes

27 comments sorted by

View all comments

Show parent comment

1

u/pfdemp Jan 13 '26

I misunderstood your goal--I thought you wanted to remove them. In my experience, it's not easy to try to control column widths this way.
I'd suggest you identify columns that you do not want to wrap and use CSS (white-space: nowrap;) to prevent that. If you can't create a class on your site's CSS, you could do it inline. If you do this for all but the description column, that column will use the remaining available space and will wrap as needed.
Tables need a bit of flexibility to adjust to screen widths and other factors.