Как применить только горизонтальный интервал между ячейками к таблице HTML?

Недавно я узнал, что мне нужно использовать атрибут cellspacing в моей таблице, но мне было интересно, могу ли я заставить его работать только по горизонтали. Я не хочу, чтобы он был вертикально распространен, что испортило макет всей моей страницы.

Ответы

Ответ 1

Лучшим способом, чем установка cellspacing="10", является использование CSS. Вы можете использовать следующий CSS для таргетинга на расстояние ячейки таблицы.

table {
  border-spacing: 10px 0;
}

Первое значение указывает горизонтальное расстояние, а второе значение указывает вертикальное расстояние.

Ответ 2

Если вам просто нужно установить содержимое ячейки отдельно, используйте интервал внутри ячеек (и установите cellspacing=0 в HTML). Это универсально поддерживается браузерами с поддержкой CSS.

Если вам действительно нужно отделить сами ячейки, чтобы между их границами или их цветным фоном было расстояние между ними, тогда border-spacing решит проблему, но только в поддержке браузеров.

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

Ответ 3

Да, я знаю, что это уродливо и отвратительно для разделения контента и стиля, но добавление разделительных (невидимых) столбцов кажется единственной вещью, которая последовательно работает на всех платформах.

Здесь я поместил некоторые пустые данные таблицы в первую строку и дал им ширину (в пикселях). Я сделал соответствующие пустые данные таблицы в последовательных строках. Чувствуется настоящая старая школа, но все просто и работает.

<table>
    <tr>
        <td>some content for column 1</td>
        <td width="18" />
        <td>other content for 2nd visible column (actually column 3)</td>
        <td width="18" />
        <td>content for 3rd visible column (actually column 5)</td>
    </tr>

    <tr>
        <td><img src="image_for_column 1.png" /></td>
        <td />
        <td><img src="image_for_column 2.png" /></td>
        <td />
        <td><img src="image_for_column 3.png" /></td>
    </tr>

</table>