كيفية إزالة جميع تنسيق CSS الموروثة لجدول؟

StackOverflow https://stackoverflow.com/questions/968895

  •  13-09-2019
  •  | 
  •  

سؤال

لدي جدول يحتوي على أسلوب معين بسبب ملف CSS للصفحة (يحتوي على حدود زرقاء، إلخ ...).

هل هناك طريقة بسيطة لإزالة CSS لهذا الجدول المحدد؟ كنت أفكر في شيء على غرار أمر مثل:

style="nostyle"

لا شيء من هذا القبيل موجودة؟

هل كانت مفيدة؟

المحلول

جرب هذا.

من إريك ماير إعادة تعيين CSS

table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

نصائح أخرى

استخدام إعادة تعيين CSS مثل YUI CSS إعادة تعيين.

كان يبحث عن شيء مثل هذا على موقع على شبكة الإنترنت يستخدم كلاهما jqueryui و ال البرنامج المساعد TableD, ، لجدول داخل طاولة tollerwer في حين ساعد بعض الإجابات هنا، لم تكن كافية، خاصة منذ استخدام TILLESARDER: Hover and JQuery UI يستخدم تقريب Corner، إلخ. هنا هو ما جئت مع:

أعلنت أن الفصل الذي عند تطبيقه على جدول سينظفه حتى بعض الإعدادات الافتراضية المعقولة. من الضروري إعلان هذا CSS قبل أي فصول أخرى قد تحتاج إلى تنظيفها، أي <link> لذلك أو وضعه في <style> علامة في الجزء العلوي من الخاص بك <head> الجزء.

.defaulttable {
  display: table;
}
.defaulttable thead {
  display: table-header-group;
}
.defaulttable tbody {
  display: table-row-group;
}
.defaulttable tfoot {
  display: table-footer-group;
}
.defaulttable tbody>tr:hover,
.defaulttable tbody>tr {
  display: table-row;
}
.defaulttable tbody>tr:hover>td,
.defaulttable tbody>tr>td {
  display: table-cell;
}
.defaulttable,
.defaulttable tbody,
.defaulttable tbody>tr:hover,
.defaulttable tbody>tr,
.defaulttable tbody>tr:hover>td,
.defaulttable tbody>tr>td,
.defaulttable tbody>tr:hover>th,
.defaulttable tbody>tr>th,
.defaulttable thead>tr:hover>td,
.defaulttable thead>tr>td,
.defaulttable thead>tr:hover>th,
.defaulttable thead>tr>th,
.defaulttable tfoot>tr:hover>td,
.defaulttable tfoot>tr>td,
.defaulttable tfoot>tr:hover>th,
.defaulttable tfoot>tr>th {
  background: transparent;
  border: 0px solid #000;
  border-spacing: 0px;
  border-collapse: separate;
  empty-cells: show;
  padding: 0px;
  margin: 0px;
  outline: 0px;
  font-size: 100%;
  color: #000;
  vertical-align: top;
  text-align: left;
  font-family: sans-serif;
  table-layout: auto;
  caption-side: top;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}

ثم قم ببساطة بتطبيق الفصل على الجدول الذي تريده "الافتراضي":

<table class="defaulttable and whatever else you want">
  <tbody>
    <tr>
      <td>This will appear with sensible defaults.</td>
    </tr>
  </tbody>
</table>

إذا كنت ترغب في التأكد من أنك تقوم بإدارة CSS لجميع الخصائص، يمكنك استخدام ما يلي:

table, caption, tbody, tfoot, thead, tr, th, td {
    all: unset;
}

وثائق MDN على all خاصية: https:/developer.mozilla.org/en-us/docs/web/css/all.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top