Derrick Derrick - 1 month ago 5
CSS Question

Issue with aligning <td> in a table

I have a table with 8

<td>
. All items are filled from a PHP array. An example row looks like this:

(row number) (Two Chinese characters) (1-5 characters) (input box 1) (1-5 characters) (input box 2) (1-5 characters) (submit button)


Currently all eight
<td>
align vertically but I would like to have td items 6(input box 2) and 7 (1-4 characters) to align next to input box 1 so there is no space in between

To make this more clear, consider how these two rows appear.

1. 喘氣 a ____ bc ____ de SUBMIT
2. 留學 ab ____ cdefa ____ gh SUBMIT


Notice the big gap in between item 6 and the input box that follows?

I need mine to look something like this:

1. 喘氣 a ____ bc ____ de SUBMIT
2. 留學 ab ____ cdefa ____ gh SUBMIT


Any idea on how I can do this? I appreciate it.

Answer

Unless you start playing with some very complex colspan attributes, you're not going to be able to do it with just <td> elements.

Instead, you will need to place all the items you want together into a single <td> element, leaving all others in their own <td> elements.

To use your example...

<tr>
  <td>(row number)</td>
  <td>(Two Chinese characters)</td>
  <td>(1-5 characters)</td>
  <td>(input box 1)</td>
  <td>(1-5 characters) (input box 2) (1-5 characters)</td>
  <td>(submit button)</td>
</tr>