CODEWITHSUNDEEP
htmlcsshtml-table
Kia Ora
Kia Ora

Reputation: 13

HTML Tables + Column Widths

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.

Upvotes: 1

Views: 1381

Answers (2)

Meligy
Meligy

Reputation: 36624

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.

Upvotes: 3

Trozdol
Trozdol

Reputation: 446

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.

Upvotes: 0

Related Questions