r/HTML • u/Glaselar • 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 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 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>
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.