Tr acting like td

HTML & CSS
1

I have the following markup

<table>
            <tr>
                <td style="width: 70%;">Text</td>
                <td style="width: 30%;">
                    <select name="Industry" style="width: 200px;">
                    </select>
                </td>
            </tr>
            <tr>
                <td>Text</td>
                <td style="text-align: center;">
                    Yes <input type="radio" name="Sector"  style="height: 20px; width: 20px;"> 
                    &nbsp;
                    No <input type="radio" name="Sector" style="height: 20px; width: 20px;">
                </td>
            </tr>
            <tr id="DiffSector">
                <td>Text </td>
                <td>
                    <select name="Industry" style="width: 100%;">
                    </select>
                </td>
            </tr>
        </table>

In CSS I have DiffSector set to display none, so initially it displays as a two-row table.
The last row then displays as table-row when the Yes radio button is chosen. The problem is, the width of the the last row is only 70% when it displays, same width as the cells above with text, not 100% as it should. Can’t figure why this is happening. The cells in the last row should inherit the widths of the cells in the first row.

2

Try with adding table-layout: fixed to the table’s styles.

Also, you shouldn’t be using tables for layout, but that’s a whole other discussion.

3

What value do you use when you show it again?

If you use display:block then it is no longer a table-row. Use display:table-row to show it.

1 Like
4

That will only work if the table has a width. If the table has no width then it defaults to the auto algorithm and widths on table cells are not guaranteed.

5

I assumed wrongly that I had set the CSS to table-row, I had set it to block by mistake. Thanks, don’t know how long it would have taken for me to notice that.

1 Like
6

What would you recommend? Keep elements separated using div’s?

7

There are many ways now with CSS to get a grid-like layout. Grid for one, or display-table to emulate a table layout with more semantic elements.

1 Like
8

In this case probably fieldsets with labels and inputs.

<fieldset>
   <label for="industry">Industry</label>
   <select id="industry" name="Industry" style="width: 200px;">
   </select>
</fieldset>

Something along those lines.
And then probably flexbox in CSS to make it look nice.

1 Like
10

It seems that fieldset is limited to two columns. What you recommend for 3 or more columns and giving the user has an option to add more rows?

11

Fieldset can contain as many form field as you like.
By two columns, perhaps you mean label and input pairs. Well that’s the nature of inputs, you have a label, then an input that relates to the label.
What’s you use case for 3 or more columns? As that doesn’t relate to the original question.

12

A use case can be a question with yes and no, or a multi-choice question having 3 or more options, or where a user can add more rows.

13

Rows are easy, just add another row. With multiple choice answers I prefer to render them below each other. That’s easier to read anyway.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.