CSS табличные отступы

Question

Я изучаю CSS и HTML.В моем коде у меня есть:

<style>
table, td, th
{
padding: 5px;
}
</style>

Это правило работает для всех таблиц на странице.Теперь я хочу сделать таблицу без отступов: Вот источник:

 <table>

  <tr>
   <td>Login</td>
   <td><input type="text" name="login" class="input"></td>
  </tr>

  <tr>
   <td>Password</td>
   <td><input type="password" name="password" class="input"></tr>
  </tr>

 </table>

Как это сделать?

Answer 1

Если вы хотите добавить в эту таблицу определенные стили, которые переопределяют стили, которые вы определили по умолчанию, вам понадобится какой-то способ ссылаться на него в CSS.

Как правило, вы предоставляете ему классили идентификатор - например, <table class='myspecialtable'>....</table>

Тогда у вас может быть таблица стилей, которая переопределяет ваши стандартные стили 5px, только для этой таблицы.

.myspecialtable, .myspecialtable td, .myspecialtable th {
    padding: 0px;
}

Если вы не можете добавить идентификаторили класс к этой таблице, тогда вы можете добавить его к родительскому элементу, и эффект будет таким же (если, конечно, этот родитель не содержит никаких других таблиц).В этом случае ваш CSS будет выглядеть примерно так:

.myspecialtablecontainer table, .myspecialtablecontainer td, .myspecialtablecontainer th {
    padding: 0px;
}

Answer 2

Я помню, когда впервые начал изучать HTML.

То, что вы ищете, это атрибут id или class . У вас будет две таблицы, например:

<table class="table1">

  <tr>
   <td>Login</td>
   <td><input type="text" name="login" class="input"></td>
  </tr>

  <tr>
   <td>Password</td>
   <td><input type="password" name="password" class="input"></tr>
  </tr>

 </table>

<table class="table2">

  <tr>
   <td>Login</td>
   <td><input type="text" name="login" class="input"></td>
  </tr>

  <tr>
   <td>Password</td>
   <td><input type="password" name="password" class="input"></tr>
  </tr>

 </table>

Чтобы сделать так, чтобы table1 имел отступы, а table2 - нет, вы должны использовать соответствующие правила CSS для идентификации и оформления таблиц:

.table1, .table1 td, .table1 th
{
padding: 5px;
}

.table2, .table2 td, .table2 th
{
padding: 0px;
}

Есть много способов, которыми я мог бы сделать это с помощью CSS. Например, в этом случае вы также можете использовать идентификаторы, но проще использовать классы, поскольку идентификатор может использоваться только один раз для каждого документа.

Немного лучшим подходом в этом случае было бы использование преимуществ каскадных правил. Я мог бы сохранить ваш оригинальный CSS и просто добавить второй набор правил:

.table, .table td, .table th
{
padding: 5px;
}

.table2, .table2 td, .table2 th
{
padding: 0px;
}

В этом случае только таблицы с классом table2 будут иметь заполнение 0px - все другие таблицы будут иметь заполнение 5px.

Было бы неплохо прочитать введение W3CSchools в CSS - http://www.w3schools.com/css/css_intro.asp. Это познакомит вас с основами и поможет вам в этом.

Answer 3

Простое использование

<style>
table, td, th
{
    padding: 0px;
}
</style>

Также попробуйте border-collapse: collapse;.

Answer 4

Один из способов дать вашему столу такой класс:

<table class="nopadding">
 [... table rows and columns...]
</table>

А затем поместите это в свой CSS:

.nopadding, .nopadding td, .nopadding th
{
  padding: 0;
}

Что говорит "любой элемент с классом должен иметь отступ 0". .Nopadding th и .nopadding td должны быть там, и это способ сказать, что "все th и td, которые находятся внутри элемента класса nopadding, также не должны иметь никаких отступов", так как ранее вы сказали всем th и td иметь отступ 5px.

Answer 5

Вы должны изменить свой CSS вместо определения стиля.

.padded { ... }

Затем вы можете установить class на этот стиль для любых таблиц, для которых вы хотите использовать этот стиль.

<table class="padded">
</table>

Когда вы устанавливаете стиль, как вы сделали, для всех элементов определенного типа, тогда единственный способ удалить их - установить стиль на что-то другое или не включать ссылку на этот файл CSS со страницы. что вы не хотите их использовать.

Answer 6

<table cellpadding='0'> Если это не сработает, вы можете создать класс css, удаляющий заполнение, и использовать его в своей таблице: <table class='no_padding'>