Apex Code Development You need to sign in to do that
Don't have an account?
meghna 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
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
<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
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
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
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
That was pretty simple but I missed it.
Thanks very much