Member Avatar for nizam27391

Hi. I wanted to ask this a long time ago.. but never get the chance.
How do I actually style the table td to the width I wanted? It didn't happen for me.
It didn't happen in separate row.
I try to set the td width but all it did is just follow the td width of another row.

So somebody help me please.

  • 3 Contributors
  • 2 Replies
  • 112 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by jcarbillon

Dani AI

Generated

HTML tables do not let a single cell pick an independent column width the way block elements do. The browser builds a column grid for the whole table and distributes widths across that grid, so setting a width on a td in one row will influence the whole column. That is the reason the OP saw widths “follow” across rows; it is the table layout algorithm at work (see MDN: table-layout and MDN: table element).

Both suggestions already in the thread are valid starting points but have tradeoffs. As noted, changing the column count and using colspan changes how cells map to the table’s column grid. As suggested, nesting a separate table inside a td gives independent column sizing for that block but increases markup complexity. Two cleaner alternatives:

  • Use explicit columns with colgroup and table-layout: fixed to force predictable widths across the table:

    <table style="table-layout:fixed; width:600px;">
  <colgroup>
    <col style="width:200px">
    <col style="width:400px">
  </colgroup>
  <tr><td>Left</td><td>Right</td></tr>
  <tr><td>A</td><td>B</td></tr>
</table>

  • If rows must have completely different column proportions and the content is layout (not tabular data), replace the table with CSS Grid (or separate tables per row). Grid allows each row to be its own layout container with independent grid-template-columns:

    <div class="row1"><div>Left</div><div>Right</div></div>
<div class="row2"><div>Left</div><div>Right</div></div>

<style>
.row1 { display:grid; grid-template-columns:200px 1fr; }
.row2 { display:grid; grid-template-columns:100px 1fr; }
</style>

For true tabular data, prefer a single semantic table with colgroup/col and table-layout for stable control. For layout-only structures, use Grid/Flexbox to avoid awkward or inaccessible table markup. More on colgroup and grid approaches at MDN: colgroup and MDN: CSS Grid.

Recommended Answers

All 2 Replies

Member Avatar for hericles

Are you trying to make a row cell of a different width to rows above or below? You would need to either place a new table inside your table row (which gets messy very quickly) or you could increase the number of columns in your table and use the colspan attribute to dictate how many columns each cell takes up.

<tr>
  <td colspan="2"></td>
</tr>
<tr>
  <td colspan="1"></td>
</tr>

Here the first td will be twice as long as the one below. This will leave gaps and possibly make your table look pretty uneven though.

Member Avatar for jcarbillon

a little revision

<table>
    <tr>
       <td colspan="2"></td>
    </tr>
    <tr>
       <td></td>
       <td></td>
    </tr>
   <table>

if you want just create new table inside your <td></td> so you could set the table width different from another table.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.