Проблема CSS: Как заставить изображения в <table>из изображений касаться вертикально? - PullRequest
0 голосов
/ 12 мая 2009

На странице Toggle Squares у меня есть таблица, составленная из image в каждой ячейке, созданной JavaScript. Я применил следующий CSS:

.game, .game td, .game tr, .game img
{ 
  border: none;
  border-spacing: 0;
  padding: 0;
  margin: 0;
}

Для того, чтобы удалить все расстояние. Однако теперь я получаю тонкую фоновую линию промежутка между двумя соседними рядами. Как я могу устранить это?

Страница действительна XHTML + CSS.

Спасибо за любую помощь.

С уважением,

Рыба Шломи .

Ответы [ 5 ]

5 голосов
/ 12 мая 2009

добавить в таблицу атрибуты cellpadding = "0" и cellspacing = "0" или попытаться использовать

border-collapse: collapse; 
border-width: 0; 

в ксс ..

3 голосов
/ 12 мая 2009
.game td img {
 display: block;
}

Изображения имеют собственный пробел

1 голос
/ 12 мая 2009

Проблема в том, что встроенное изображение рассматривается как буква с подъемом = высота изображения и спуском = спуск шрифта. Это означает, что ячейка таблицы, которая содержит только изображение, имеет высоту, превышающую высоту изображения.

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

1 голос
/ 12 мая 2009

Исправлено:

.game, .game td, .game tr, .game img
{ 
  border: none;
  border-spacing: 0;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}
0 голосов
/ 12 мая 2009

Мне удалось получить эффект, который вы ищете, с помощью следующего кода:

Код изображает четыре сплошных цветных JPEG в непосредственной близости друг от друга, образуя квадрат без пробела между ними:

<html>
<head>
    <style>
        td { margin 0px; padding: 0px;}
        table { border-collapse:collapse;}
    </style>
</head>
<body>
    <table>
        <thead />
        <tbody>
            <tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>                   
            <tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>
        </tbody>
    </table>
</body>

...