Visualforce + Lightning: apex:dataTable insists on being width:100%

Question

I'm going through and making adjustments to existing VF pages to look good in lightning. One issue I'm running into is that it seems apex:dataTables persistently want to span the width of the frame they are in. If I set width="50%" or style="width:50%", they still continue to span the entire width, but somehow look even worse. What could it be in LEX stylesheets that I need to override to disable this behavior?

I would like each column of my table to simply stack next to the previous one so that it essentially uses the expected cellspacing of the table. Classic demonstrates this desired effect. You can see it becomes ridiculously spaced out in LEX. I'm sure I'm missing something basic here...

Thanks for the help!

UPDATE:

Here is the code I'm working with (as updated per suggestion in response):

<!--div class="slds-grid">
    <!--div class="slds-size_1-of-2"-->
        <apex:dataTable value="{!rules}" var="rw" cellspacing="4" rendered="{!rules.size > 0}">
            <apex:column style="text-align:center; vertical-align:middle" width="12px">
                <apex:outputText value="{!rw.slot}" style="font-weight:bold"/>
            </apex:column>
            <apex:column style="vertical-align:middle">
                <apex:facet name="header">{!q.ObjectLabel__c} Field</apex:facet>
                <apex:selectList value="{!rw.r.Lead_Field__c}" style="height:20.25px" size="1">
                    <apex:selectOptions value="{!fieldNames}"/>
                    <apex:actionSupport event="onchange" rerender="filters,messages" status="blackout"/>
                </apex:selectList>
            </apex:column>
            <apex:column style="vertical-align:middle">
                <apex:facet name="header">Operator</apex:facet>
                <apex:selectList value="{!rw.r.Operator__c}" style="width:162px; height:20.25px" size="1">
                    <apex:selectOptions value="{!rw.operators}"/>
                    <apex:actionSupport event="onchange" rerender="filters,messages" status="blackout"/>
                </apex:selectList>
            </apex:column>
            <apex:column style="vertical-align:middle">
                <apex:facet name="header">Value</apex:facet>
                <apex:inputField value="{!rw.r.TextValue__c}" style="width:250px" html-placeholder="{!rw.idsOnly}" rendered="{!rw.r.Operator__c == 'equals' || rw.r.Operator__c == 'not equal to'}"/>
                <apex:outputPanel styleClass="requiredInput" layout="block" rendered="{!rw.r.Operator__c != 'equals' && rw.r.Operator__c != 'not equal to'}">
                    <apex:outputPanel styleClass="requiredBlock" layout="block"/>
                    <apex:inputField value="{!rw.r.TextValue__c}" style="width:250px" html-placeholder="{!rw.idsOnly}"/>
                </apex:outputPanel>
            </apex:column>
            <apex:column style="text-align:center; vertical-align:middle">
                <apex:commandLink type="image/png" action="{!deleteRule}" immediate="true" rerender="filters,messages" status="blackout">
                    <apex:image value="{!$Resource.DeleteIcon}" style="width:12px; height:12px" title="Delete filter"/>
                    <apex:param name="deleteLine" value="{!rw.slot}" assignTo="{!deleteLine}"/>
                </apex:commandLink>
            </apex:column>
         </apex:dataTable>
     <!--/div>
 <!--/div-->

With the divs uncommented, this is the result:

You can see how each column now has an (unwelcome) even width, and is ignoring the widths specified (regardless of whether the width is set via CSS within the column's component, or as an attribute of the column).

To reiterate, classic's natural way of handling the column width/spacing is what I'm going for (width is honored, spacing is small and consistent). Thanks!

Answer 1

You should be able to remedy this with a grid layout:

<div class="slds-grid">
  <div class="slds-size_1-of-2">
    <apex:dataTable .../>
  </div>
  <div class="slds-size_1-of-2">
    <apex:dataTable ... />
  </div>
</div>

Answer 2

I found a simple if not somewhat hacky way to resolve this issue without needing to bring in the SLDS stylesheets at all (which carry their own problems with legacy VF pages). I simply added an extra empty column with 100% width to my dataTable like so:

<apex:dataTable value="{!foo}" var="f" cellspacing="4">
    <apex:column>
        <!--column 1 data-->
    </apex:column>
    <apex:column>
        <!--column 2 data-->
    </apex:column>
    <apex:column>
        <!--column 3 data-->
    </apex:column>
    <!-- BELOW IS THE MAGIC -->
    <apex:column width="100%" rendered="{!onLightning}"/>
</apex:dataTable>

The onLightning var simply looks at the current user's UITheme to know when to render this column:

public boolean onLightning {get {if (onLightning == null) onLightning = userInfo.getUiThemeDisplayed() == 'Theme4d'; return onLightning;} set;}

Apparently by adding in a blank column with 100% width, the lightning stylesheet's bias to force tables to fill 100% of their container is effectively alleviated, and every column is then able to dynamically stack one next to one another while respecting their specified width. However, the cellspacing attribute doesn't actually seem to take any effect... though I'm satisfied with the default value that seems to be getting applied by the stylesheets:

UPDATE: Looks like the core problem, as indicated by a closer examination of the browser's page inspect tool, is that tables in LEX are given a min-width of 100%. So an easy solution as it turns out is to set this to 0% in the table style:

<apex:dataTable value="{!foo}" var="f" style="min-width:0%">
    <apex:column>
        <!--column 1 data-->
    </apex:column>
    <apex:column>
        <!--column 2 data-->
    </apex:column>
    <apex:column>
        <!--column 3 data-->
    </apex:column>
</apex:dataTable>