В этой статье блога мы рассмотрим различные методы удаления заполнения из первой и последней ячеек таблицы SLDS (Salesforce Lightning Design System). SLDS предоставляет полный набор стилей и компонентов CSS для создания приложений Salesforce. Мы углубимся в примеры кода и пошаговые инструкции для каждого метода, чтобы достичь желаемого результата.

Метод 1: псевдоклассы CSS

<style>
  .slds-table td:first-child,
  .slds-table th:first-child {
    padding-left: 0;
  }
  .slds-table td:last-child,
  .slds-table th:last-child {
    padding-right: 0;
  }
</style>

Метод 2: CSS-селекторы с определенными классами

<style>
  .slds-table.no-padding td:first-child,
  .slds-table.no-padding th:first-child {
    padding-left: 0;
  }
  .slds-table.no-padding td:last-child,
  .slds-table.no-padding th:last-child {
    padding-right: 0;
  }
</style>
<table class="slds-table no-padding">
  <!-- Table content -->
</table>

Метод 3: встроенный CSS

<table class="slds-table">
  <tr>
    <td >First Cell</td>
    <!-- Rest of the table cells -->
  </tr>
  <tr>
    <!-- Table rows -->
  </tr>
  <tr>
    <!-- Table rows -->
  </tr>
  <tr>
    <!-- Rest of the table cells -->
    <td >Last Cell</td>
  </tr>
</table>

Метод 4: JavaScript (jQuery)

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('.slds-table td:first-child, .slds-table th:first-child').css('padding-left', '0');
    $('.slds-table td:last-child, .slds-table th:last-child').css('padding-right', '0');
  });
</script>

В этой статье мы рассмотрели несколько методов удаления заполнения из первой и последней ячеек таблицы SLDS. Эти методы включают использование псевдоклассов CSS, селекторов CSS с определенными классами, встроенного CSS и JavaScript (jQuery). В зависимости от требований и предпочтений вашего проекта вы можете выбрать подходящий метод для достижения желаемого результата. Поэкспериментируйте с этими методами, чтобы улучшить внешний вид и удобство использования таблиц SLDS.