function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
meghna nmeghna n 

datatable border in lightning

I am having a piece of code in my lightning component which will display values in a table format.

  <lightning:card title="Provider Flag Information">
                            <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
                                <thead>
                                    <tr class="">
                                        <th class="" scope="col">
                                            <div class="slds-truncate" title="">Flag Name</div>
                                        </th>
                                        <th class="" scope="col">
                                            <div class="slds-truncate" title="">Begin Date</div>
                                        </th>
                                        <th class="" scope="col">
                                            <div class="slds-truncate" title="">End Date</div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="slds-hint-parent">
                                        <td>
                                            <div class="slds-truncate" title="">Print</div>
                                        </td>
                                        <td data-label="Close Date">
                                            <div class="slds-truncate" title="">01/01/1990</div>
                                        </td>
                                        <td data-label="Prospecting">
                                            <div class="slds-truncate" title="Prospecting">11/12/2018</div>
                                        </td>
                                    </tr>
                                    <tr class="slds-hint-parent">
                                        <td>
                                            <div class="slds-truncate" title="">Sample 2</div>
                                        </td>
                                        <td data-label="Close Date">
                                            <div class="slds-truncate" title="">05/05/2018</div>
                                        </td>
                                        <td data-label="Prospecting">
                                            <div class="slds-truncate" title="Prospecting">11/12/2018</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                           </lightning:card>

when the page loads then the table is displayed as follows shown in image
Table Image
My requirement is to have a proper border around the table . Is it possible without using CSS in slds or we have to use CSS.

Please show me some working code for my understanding.

thanks
meghna
Best Answer chosen by meghna n
Khan AnasKhan Anas (Salesforce Developers) 
Hi Meghna,

Greetings to you!

You can use the border attribute in table tag. <table border="2">
 
<lightning:card title="Provider Flag Information">
        <table border="2" class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
            <thead>
                <tr class="">
                    <th class="" scope="col">
                        <div class="slds-truncate" title="">Flag Name</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="">Begin Date</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="">End Date</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="slds-hint-parent">
                    <td>
                        <div class="slds-truncate" title="">Print</div>
                    </td>
                    <td data-label="Close Date">
                        <div class="slds-truncate" title="">01/01/1990</div>
                    </td>
                    <td data-label="Prospecting">
                        <div class="slds-truncate" title="Prospecting">11/12/2018</div>
                    </td>
                </tr>
                <tr class="slds-hint-parent">
                    <td>
                        <div class="slds-truncate" title="">Sample 2</div>
                    </td>
                    <td data-label="Close Date">
                        <div class="slds-truncate" title="">05/05/2018</div>
                    </td>
                    <td data-label="Prospecting">
                        <div class="slds-truncate" title="Prospecting">11/12/2018</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </lightning:card>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Meghna,

Greetings to you!

You can use the border attribute in table tag. <table border="2">
 
<lightning:card title="Provider Flag Information">
        <table border="2" class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
            <thead>
                <tr class="">
                    <th class="" scope="col">
                        <div class="slds-truncate" title="">Flag Name</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="">Begin Date</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="">End Date</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="slds-hint-parent">
                    <td>
                        <div class="slds-truncate" title="">Print</div>
                    </td>
                    <td data-label="Close Date">
                        <div class="slds-truncate" title="">01/01/1990</div>
                    </td>
                    <td data-label="Prospecting">
                        <div class="slds-truncate" title="Prospecting">11/12/2018</div>
                    </td>
                </tr>
                <tr class="slds-hint-parent">
                    <td>
                        <div class="slds-truncate" title="">Sample 2</div>
                    </td>
                    <td data-label="Close Date">
                        <div class="slds-truncate" title="">05/05/2018</div>
                    </td>
                    <td data-label="Prospecting">
                        <div class="slds-truncate" title="Prospecting">11/12/2018</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </lightning:card>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
meghna nmeghna n
Hello Khan

That was pretty simple but I missed it.

Thanks very much