Thêm border và padding cho table trong tất cả post wordpress

 Để thêm một class có đủ viền (border) và khoảng cách (padding) cho tất cả các bảng (table) trong bài viết một cách tự động, bạn có thể thực hiện theo các bước sau:

1. Tạo class CSS cho bảng:

Trong file CSS của bạn (hoặc trong phần <style> nếu bạn muốn chèn trực tiếp vào trang HTML), bạn có thể tạo một class tùy chỉnh để áp dụng viền và padding cho bảng:

css
.table-custom {
  border: 1px solid #cccccc;
  border-collapse: collapse;
}

.table-custom td {
  border: 1px solid #cccccc;
  padding: 8px;
}

2. Tự động thêm class vào tất cả các bảng trong bài viết (nếu sử dụng WordPress):

Nếu bạn đang sử dụng WordPress và muốn tự động thêm class vào tất cả các bảng trong bài viết, bạn có thể sử dụng một đoạn mã tùy chỉnh trong tệp functions.php của theme:

php
function add_custom_class_to_tables($content) {
    // Tìm tất cả các bảng và thêm class .table-custom
    $content = str_replace('<table', '<table class="table-custom"', $content);
    return $content;
}

add_filter('the_content', 'add_custom_class_to_tables');

3. Nếu không sử dụng WordPress:

Nếu bạn không sử dụng WordPress, bạn có thể thêm class trực tiếp vào các bảng trong HTML bài viết bằng cách:

html
<table class="table-custom">
  <tbody>
    <tr>
      <td width="301">Đồng hồ đa năng METSEPM2110: VAF P&amp;E THD</td>
      <td width="301">Đồng hồ đa năng METSEPM2120: VAF P&amp;E RS485 HAR.15 1%</td>
    </tr>
    <tr>
      <td width="301">Đồng hồ đa năng METSEPM2130: P&amp;E RS485 HAR.31 0.5%</td>
      <td width="301">Đồng hồ đa năng METSEPM2210: VAF P&amp;E THD</td>
    </tr>
    <tr>
      <td width="301">Đồng hồ đa năng METSEPM2220: VAF P&amp;E RS485 HAR.15 1%</td>
      <td width="301">Đồng hồ đa năng METSEPM2230: VAF P&amp;E RS485 HAR.31 0.5%</td>
    </tr>
  </tbody>
</table>

4. JavaScript (Tự động thêm class vào bảng khi không dùng WordPress):

Nếu bạn không muốn chỉnh sửa HTML trực tiếp, bạn có thể sử dụng JavaScript để tự động thêm class vào tất cả các bảng trong bài viết:

javascript
document.addEventListener('DOMContentLoaded', function () {
  const tables = document.querySelectorAll('article table');
  tables.forEach(function(table) {
    table.classList.add('table-custom');
  });
});

Mã này sẽ tự động thêm class .table-custom vào tất cả các bảng trong phần tử article (thường dùng cho nội dung bài viết) khi trang web được tải.

Tổng kết:

Bạn có thể sử dụng CSS, PHP (trong WordPress), hoặc JavaScript để tự động thêm class vào bảng và áp dụng viền và padding theo cách bạn mong muốn.