Left align two different text fields without using columns

Question

I wanted to do create a table in HTML like this where there is a description of the item and then attribute to that description. Right now, it looks like this:

 -----------------------------------------------------------------
| Column 1                     | Column 2     | Column 3          |
 -----------------------------------------------------------------
| Short text (checked)         | VA           | $100              |
| Longer text (checked)        | DC           | $100              |
| Very long text (checked)     | MD           | $100              |
| Text (checked)               | SC           | $100              |
 -----------------------------------------------------------------

The ideal design of it would look like this, where the attribute "(checked)" is tabbed out and left aligned with the other rows:

 -----------------------------------------------------------------
| Column 1                     | Column 2     | Column 3          |
 -----------------------------------------------------------------
| Short text         (checked) | VA           | $100              |
| Longer text        (checked) | DC           | $100              |
| Very long text     (checked) | MD           | $100              |
| Text               (checked) | SC           | $100              |
 -----------------------------------------------------------------

How would I accomplish this using HTML, CSS, and JS while also handling for varying description lengths?

Edit: I can't add another column to the table because there is pre-existing logic that would get messed up

There is some pre-existing logic that interacts with some of the columns which would make that logic have to be re-written. — hengj, Jul 22 '16 at 20:36

gearsdigital · Answer 1 · 2016-07-22T21:00:38.700

1

That is a proper use case for colspan, which specifies the number of columns a cell should span. If you do not want to apply additional attributes or classes to your table markup you're able to solve it with css only using column-span and td:nth-child(2).

table {
  width:100%
}

th {
  text-align:left
}

td:nth-child(2) {
  text-align:right;
}

<table>
    <tr>
      <th colspan="2">Column 1</th>
      <th>Column 2</th>
      <th>Column 2</th>
    </tr>
    <tr>
      <td>Short text</td>
      <td>(checked)</td>
      <td>VA</td>
      <td>$100</td>
    </tr>
 </table>

edited Jul 22 '16 at 21:00

answered Jul 22 '16 at 20:34

gearsdigital

13,915
6
44
73

2

Question title states *"...without using columns"*. – Jul 22 '16 at 20:38
Yeah, i've read the title but he did not explain why. IMHO is my answer a proper way to solve that kind of problem. If the OP want to have a clean frontend, editing the pre-existing logic should come into question. Just my two cents... – gearsdigital Jul 22 '16 at 20:50

Left align two different text fields without using columns

1 Answers1