Как установить ширину рамки <table> с помощью CSS?

Почему это работает?

<table border=1>

И это не так?

<table style="border-width:1px;border-color:black">

Я получаю тот же результат в Chrome и в IE9.

Ответ 1

Выполнение границ таблиц с помощью css немного сложнее (но не так много, см. этот jsfiddle в качестве примера):

table {
  border-collapse: collapse;
  border: 1px solid black;
}

table td {
  border: 1px solid black;
}
<table>
  <tr>
    <td>test</td>
    <td>test</td>
  </tr>
</table>

Ответ 2

По умолчанию border-style - none, поэтому вы должны указать это, а также ширину и цвет.

Скрывающее свойство border можно использовать для установки всех трех значений за один раз.

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

table, th, td {
    border: solid black 1px;
}

См. также свойства границ и таблицы в CSS.

Ответ 3

Причина, по которой он не работает, заключается в том, что, несмотря на установку border-width и border-color, вы не указали border-style:

<table style="border-width:1px;border-color:black;border-style:solid;">

JS Fiddle demo.

Обычно лучше определять стили в таблице стилей (так что все элементы стилизованы без необходимости находить и изменять каждый атрибут style):

table {
    border-color: #000;
    border-width: 1px;
    border-style: solid;
    /* or, of course,
    border: 1px solid #000;
    */
}

JS Fiddle demo (Или используя сокращенную обозначение border).

Ответ 4

<table style='border:1px solid black'>
    <tr>
        <td>Derp</td>
    </tr>
</table>

Это должно сработать. Я использую сокращенный синтаксис для границ.

Ответ 5

Вам нужно добавить пограничный стиль следующим образом:

<table style="border:1px solid black">

или вот так:

<table style="border-width:1px;border-color:black;border-style:solid;">

Ответ 6

<table style="border: 5px solid black">

Это добавляет только границу вокруг таблицы.

Если вы хотите получить такую ​​же границу через CSS, добавьте это правило:

table tr td { border: 5px solid black; }

и одна вещь для таблицы HTML, чтобы избежать пробелов

<table cellspacing="0" cellpadding="0">

Ответ 7

Вот так:

border: 1px solid black;

Почему это не сработало? потому что:

Всегда объявляйте свойство border-style (solid in my example) перед границей имущество. Элемент должен иметь границы, прежде чем вы сможете изменить цвет.