1

I have a table using slds-table classes. The only problem I have is some columns are wider than others, and I don't know why:

enter image description here

Here is the code for the table:

<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
        <thead class="header">
            <tr class="slds-line-height_reset header">
                <th>Piso/Dep</th>
                <apex:repeat value="{!numDeptos}" var="numDepto">
                    <th class="" scope="col">
                        {!numDepto}
                    </th>
                </apex:repeat>
            </tr>
        </thead>
        <tbody>
            <apex:repeat value="{!pisos}" var="piso">
                <tr class="slds-hint-parent">
                    <td>{!piso}</td>
                    <apex:repeat value="{!mapPisosDeptos[piso]}" var="depto">
                        <apex:outputPanel rendered="{!depto.Estado2__c == 'Disponible'}">
                            <td class="cell" style="background-color:lightgreen;" onclick="readCell('{!depto.Id}')" onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor ='lightgreen'">
                                <apex:outputText value="${0, number, ###,###,###,##0}">
                                    <apex:param value="{!depto.Standard_Pricebook_Price__c}" />
                                </apex:outputText>
                            </td>
                        </apex:outputPanel>
                        <apex:outputPanel rendered="{!depto.Estado2__c == 'Reservado'}" >
                            <td class="cell" style="background-color:yellow;" onclick="readCell('{!depto.Id}')" onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor ='yellow'">
                                RESERVADO
                            </td>
                        </apex:outputPanel>
                        <apex:outputPanel rendered="{!depto.Estado2__c == 'Vendido'}">
                            <td class="cell" style="background-color:red;" onclick="readCell('{!depto.Id}')" onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor ='red'">
                                VENDIDO
                            </td>
                        </apex:outputPanel>
                    </apex:repeat>
                </tr>
            </apex:repeat>
        </tbody>
    </table>

I don't really understand why widths differ between some columns even if they show pretty much the same information.. Not longer texts or anything. Any help is appreciated.

4
  • 2
    since you are using standard html tags, maybe this can help you: CSS table td width
    – McCubo
    Jul 20, 2022 at 15:10
  • 1
    @McCubo it did. Thanks! I'll answer and mention you for the help. Jul 20, 2022 at 15:43
  • 1
    This is tangential to your main question, so putting this as a comment rather than an answer: the columns in your screenshot that are wider contain the word "RESERVADO" which takes up more width than the other cell content
    – Jeff Kranz
    Jul 20, 2022 at 15:53
  • @JeffKranz yes, I did notice that. I just added a min and max width to every cell (enough width so the word fits) and thats that. Jul 20, 2022 at 16:32

1 Answer 1

0

I ended up using this answer from the post mentioned by McCubo on the comment.

td, th {
   min-width: 60px; //60px worked for me, depends on every case.
   max-width: 60px;
   overflow: hidden;
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .