comboBox generates a table instead of span in readmode web

Question

When viewing a Xpage on the web containing a table with a comboBox in a column the html generated by Domino creates a table for the combobox but a span for other components (tested currently on textFields and computedFields).
This is then rendered with a pixel of vertical alignment difference that annoys me.
How can I overcome this?

<table>
        <tbody>
            <tr>
                <td colspan="3">
                    <table id="view:_id1:_id2:_id3:legend1:callbackFieldControlSet:CounterpartyName">
                        <tbody>
                            <tr>
                                <td>
                                    AVANZA SWEDEN
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <span id="view:_id1:_id2:_id3:legend1:callbackFieldControlSet:CounterpartyShort">AVANZA SWEDEN</span>
                </td>
            </tr>
        </tbody>
    </table>

In edit mode the difference is still there but the generated html of the combobox is not a table but a select and then I can control it using css.
See picture below.

Example read mode

Example edit mode (css edited):

<xp:table>
        <xp:tr>
            <xp:td>
                <xp:label
                    value="Counterparty name:"
                    id="counterpartyName_Label1"
                    for="CounterpartyName"
                >
                </xp:label>
            </xp:td>
            <xp:td>
                <xp:comboBox
                    id="CounterpartyName"
                    value="#{document1.CounterpartyName}"
                    required="true"
                >
                </xp:comboBox>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label
                    value="Counterparty short:"
                    id="counterpartyShort_Label1"
                    for="CounterpartyShort"
                >
                </xp:label>
            </xp:td>
            <xp:td>
                <xp:inputText
                    value="#{document1.CounterpartyShort}"
                    id="CounterpartyShort"
                    required="true"
                    styleClass="xspInputFieldEditBox"
                >
                </xp:inputText>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label
                    value="Bic Code:"
                    id="bicCode_Label1"
                    for="BicCode"
                >
                </xp:label>
            </xp:td>
            <xp:td>
                <xp:inputText
                    value="#{document1.BicCode}"
                    id="BicCode"
                    styleClass="xspInputFieldEditBox"
                >
                </xp:inputText>
            </xp:td>
        </xp:tr>
    </xp:table>

Answer 1

problem is that the inner table has its own borders (as always: one for the table itself and one for the td) which need to be collapsed. Just create some CSS to handle this:

1. give your outer table its own style-class e.g. "myOuterTable"

2. your css would then address any table inside ".myOuterTable", like this:

   table.myOuterTable table {border-collapse: collapse;}

This works fine in both edit and read mode because only in read mode you have that extra "inner" table; in edit mode, there's nothing to be collapsed...

works even in IE, btw...

Hope it works for you