Перезапись ширины таблицы, объявленной в css, с атрибутом html width - PullRequest
Новая
       23

Перезапись ширины таблицы, объявленной в css, с атрибутом html width

0 голосов
/ 04 марта 2019

Необычный вопрос, на который я не смог найти ответ:

Можно ли перезаписать таблицы, стилизованные с помощью css, используя атрибут width.

Я бынапример, для таблиц html по умолчанию width из 100% (с использованием css), если числовой аргумент width не передан в мою таблицу в разметке.

Прямо сейчас, если я установлю width из моей таблицы в auto в css, я могу перезаписать ширину, используя атрибут width, применив его к элементу table в разметке.Однако auto по умолчанию не имеет ширины 100%.Если я установлю width моей таблицы на 100% в css, то я не смогу перезаписать ширину с помощью атрибута width, применив его к элементу table в разметке.

Кто-нибудь знает обходной путь, чтобы я мог взять свой столовый пирог и съесть его тоже? 

.table-a {
  width: 100%;
  border: 1px solid black;
  margin: 48px auto 16px;
}

.table-b {
  width: auto%;
  border: 1px solid black;
  margin: 48px auto 16px;
}
<table class="table-a" width="200">
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</table>

<table class="table-b" width="200">
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</table>

<table class="table-b">
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</table>

<p>Table A seems to show that the width attribute will not override external stylesheets the same way inline stylesheets.</p>

<p>Is there a way to ensure that when a width attribute is not passed to a table, that it defaults to 100%, and otherwise adheres to the width declaration/</p>

1 Ответ

0 голосов
/ 04 марта 2019 

table {
  border: 1px solid black;
  margin: 48px auto 16px;
}

table:not([width]) {
  width: 100%;
}
<table width="200">
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</table>

<table>
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</table>

<p>The :not() selector successfully enables me to use the width attribute in the markup and style every other table with a width of 100%.</p>

Вы можете использовать :not селектор.Например, table:not([width]) Тогда css будет применен ко всем таблицам, которые не имеют атрибута width

.
...