HTML Tables + Column Widths

Question

So I have a table, set to a width of 40% on my page. 2 columns

I want to have some rows with 50/50 column splits, and some rows at 25/75.

This is currently my full styling for the table:

table {
    width: 40%;
}

td {
    padding: 7px;
}

td.labelText {
    vertical-align: middle;
    text-align: right;
    padding-right: 10px;
    width: 50%;
}

td.editor {
    padding-left: 7px;
    width: 50%;
}

td.checklabelText {
    vertical-align: middle;
    text-align: right;
    padding-right: 10px;
    width: 75%;
}
td.checkeditor {
    padding-left: 7px;
    width: 25%;
}

Whenever I set the <td> tags to the class with 75/25, every row in the table also resizes. I know I'm doing something trivially wrong but can't get my head around it!

Any help appreciated, thanks.

Meligy · Accepted Answer · 2016-02-02 01:32:29Z

That's how table works.

You can achieve a lot with colspan though.

If you always have 2 TDs, in some rows you can have

/* Important */
td {
  width: 25%;
}

/* for demo */
td {
  /*for demo*/
  background: #eeeeaa;
  text-align: center;
}

/* for demo */
table {
  width: 100%;
}

<table>
  <thead>
    <tr>
      <th colspan="4">Treating the table as 4-column table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">50 (colspan=2)</td>
      <td colspan="2">50 (colspan=2)</td>
    </tr>
    <tr>
      <td colspan="3">75 (colspan=3)</td>
      <td colspan="1">25 (colspan=1)</td>
    </tr>
  </tbody>
</table>

You can also have only one TD with colspan set to the max number of columns you have, and then inside this one TD you can have a child table with different cell widths.

/* Important */
td.edit-75 {
  width: 75%;
}
/* Important */
td.edit-25 {
  width: 25%;
}


/* for demo */
td {
  background: #eeeeaa;
  text-align: center;
}

/* for demo */
table {
  width: 100%;
}

/* for demo */
td.edit-75, td.edit-25 {
  background: #99cc99;
}

<table>
  <thead>
    <tr>
      <th colspan="2">Keeping it as 2-column table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td colspan="2">
        Do whatever you want here, ex:
        <table>
          <tbody>
            <td class="edit-75">75</td>
            <td class="edit-25">25</td>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>50</td>
      <td>50</td>
    </tr>
  </tbody>
</table>

I quite often use the last trick when there is an expand/collapse row that when expanded shows non tabular data like a form or so.

Trozdol · Accepted Answer · 2016-02-02 01:12:15Z

0

Table columns will always align. You might need to create something more custom to your needs.

<table>
    <tr>
        <td><div class="w75">data</div><div class="w25">data</div></td>
        <td><div class="w25">data</div><div class="w75">data</div></td>
        etc. etc.

There's a million different approaches you could take and this is just one.

Hope that helps.

answered Feb 2, 2016 at 1:12

Trozdol

4462 silver badges11 bronze badges

2 Comments

unpollo Over a year ago

I'll add, that if you want a <td> to span across columns, you can use the colspan property to do so: codepen.io/anon/pen/zrLZoN Btw, it's a "no-no" to use tables for layout (which is what it sounds like OP is trying to do).

Trozdol Over a year ago

True. I assume the use of tables is intentional. Might be (aside from current issue) the best solution to a problem without knowing more. :)

Collectives™ on Stack Overflow

HTML Tables + Column Widths

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related