如何为指定Bootstrap 5 DataTable永久生效自定义CSS？

我将DataTable设置为可编辑状态后出现显示异常，修改前效果：

通过Firefox开发者工具调整CSS类后问题解决，修改后效果：

原CSS类为：class="col-sm-12 col-md-12"
调整后的CSS类（推测为移除col-md-12）：

现咨询：如何让该CSS修改仅对此表格永久生效？

注：标签显示为bootstrap-4，但实际使用Bootstrap 5，未找到对应标签。

方法1：给表格容器加专属自定义类（推荐） #

1. 找到DataTable的父容器，给它加一个唯一的自定义类，比如 editable-datatable-wrap：

<div class="col-sm-12 editable-datatable-wrap">
  <!-- 你的DataTable代码 -->
</div>

2. 在项目的全局CSS文件里添加规则，只对这个容器生效：

/* 覆盖Bootstrap列类的默认样式，适配可编辑DataTable */
.editable-datatable-wrap {
  width: 100% !important;
  max-width: 100% !important;
  /* 其他需要的样式调整，比如内边距、对齐方式等 */
}

如果是要彻底移除col-md-12的影响，直接删掉容器上的col-md-12类，保留自定义类即可。

方法2：给表格加唯一ID，精准定位 #

1. 给DataTable标签添加唯一ID，比如 custom-editable-table：

<table id="custom-editable-table" class="datatable">
  <!-- 表格内容 -->
</table>

2. 通过ID定位到它的父容器，写专属样式：

/* 只针对这个表格的父容器调整样式 */
#custom-editable-table.parent('.col-sm-12') {
  width: 100% !important;
  /* 按需添加其他样式 */
}

或者直接给父容器加ID，更直接：

<div class="col-sm-12" id="table-container-01">
  <table id="custom-editable-table" class="datatable">...</table>
</div>

对应的CSS：

#table-container-01 {
  /* 自定义样式 */
}

方法3：内联样式（快速临时方案） #

直接在表格父容器上写内联样式，仅当前容器生效：

<div class="col-sm-12" style="width: 100%; max-width: 100%;">
  <!-- DataTable -->
</div>

内容的提问来源于stack exchange，提问作者answerSeeker