display: table-cell with width: 100% within a <td colspan=“2”> does not fill parent cell

• Component: Tables
• Status: NEW ---

[Dai Rees]

Given this CSS and HTML:

table { width: 100%; }
table label { display: table-cell; white-space: nowrap; }
table span  { display: table-cell; width: 100%; }
table input { width: 100%; box-sizing: border-box; }

<table>
        <tbody>
            <tr>
                <td>
                    <label>Name</label>
                    <span>
                        <input type="text" />
                    </span>
                </td>
                <td>
                    <label>Another field</label>
                    <span>
                        <input type="text" />
                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Really long field name</label>
                    <span>
                        <input type="text" />
                    </span>
                </td>
                <td>
                    <label>S</label>
                    <span>
                        <input type="text" />
                    </span>
                </td>
            </tr>
        </tbody>
    </table>

In Internet Explorer and Firefox, the textbox next to "really long field name" fills the containing cell's width, however in Chrome and iOS Safari (iOS 8) it does not and it has the default <input> width.

[Dai Rees]

There is a mistake in the example above, there should only be 1 column in the second row, not two. Here is the correct HTML:

<table>
        <tbody>
            <tr>
                <td>
                    <label>Name</label>
                    <span>
                        <input type="text" />
                    </span>
                </td>
                <td>
                    <label>Another field</label>
                    <span>
                        <input type="text" />
                    </span>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <label>Really long field name</label>
                    <span>
                        <input type="text" />
                    </span>
                </td>
            </tr>
        </tbody>
    </table>

[Ahmad Saleem]

Created attachment 461674 [details]
Safari 15.6 and STP 151 differ from other browsers

I took HTML from Comment 01 and CSS from Comment 0 and turned them into JSFiddle:

Link - https://jsfiddle.net/ryzvLsgo/show

As can be seen from attached screenshot, Safari 15.6 / STP 151 render the "really long field" not so long compared to other browsers (Chrome Canary 106 and Firefox Nightly 105).

I am not sure on web-spec but I think it is reproducible since Safari is not match with other browser and it is interop issue. Appreciate if someone can give more insight. Thanks!