Пробелы между изображениями в таблице - PullRequest
Новая
       0

Пробелы между изображениями в таблице

2 голосов
/ 10 августа 2011

У меня есть следующий HTML: 

<table width="700" align="center" style="border:0">
    <tr style="border:0"> <td> <img src="images\1.png" /> </td></tr>
    <tr style="border:0"> <td> <img src="images\2.png" /> </td> </tr>
    <tr style="border:0"> <td> <img src="images\3.png" /></td> </tr>
    <tr style="border:0"> <td> <img src="images\4.png" /> </td></tr>
    <tr style="border:0"> <td> <img src="images\5.png" /> </td></tr>
    <tr style="border:0"> <td> <img src="images\6.png" /> </td></tr>
</table>

Проблема в том, что между изображениями появляется пробел. Как мне это удалить?

Ответы [ 10 ]

6 голосов
/ 10 августа 2011 
<table width="700" align="center" border="0" cellpadding="0" cellspacing="0">
        <tr><td> <img src="images\1.png" /></td></tr>
        <tr><td> <img src="images\2.png" /></td></tr>
        <tr><td> <img src="images\3.png" /></td></tr>
        <tr><td> <img src="images\4.png" /></td></tr>
        <tr><td> <img src="images\5.png" /></td></tr>
        <tr><td> <img src="images\6.png" /></td></tr>
    </table>
4 голосов
/ 10 августа 2011

сначала добавьте cellspacing = "0" cellpadding = "0" в элемент таблицы 

  <table width="700" align="center" style="border:0" cellspacing="0" cellpadding="0">

и удалите пробелы между тегами td и img

3 голосов
/ 10 августа 2011

Вы можете попробовать не использовать таблицу, поэтому у вас есть ... 

<img src="images/1.png" />
...
<img src="images/6.png />

и использовать некоторые CSS, чтобы сделать их блокирующими элементами без полей / отступов

или выВы можете использовать css на вашем столе следующим образом ... 

<style>
    table { border-collapse: collapse; }
</style>

вам также нужно добавить пару атрибутов в вашу таблицу 

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

, которые пытаются избавиться от отступов.поле на вашем столе.

Но для того, что вы пытаетесь сделать, IMO будет лучше пойти по прямому маршруту тега <img /> с помощью css.

2 голосов
/ 10 августа 2011

измените <td> <img src="images\1.png" /> </td></tr> на <td><img src="images\1.png" /></td></tr>, установите для пробелов и ячеек 0 значение и установите флажок

2 голосов
/ 10 августа 2011 
<table cellspacing="0">

должен решить:)

1 голос
/ 10 августа 2011

Добавить в свой стиль 

border-spacing:0px;
0 голосов
/ 10 августа 2017

Попробуйте: 

display:inline-block;
vertical-align:top;
0 голосов
/ 28 февраля 2014

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

Для тех, кто пришел сюда после того, как столкнулся с этой проблемой в блогах. Я столкнулся с той же проблемой. Однако мой стол был частью блога на блоггере. У меня были изображения каждого в ячейке таблицы. Я пробовал cellspace, cellpadding и многие другие атрибуты и параметры, но ничего не получалось. В случае блога в шаблон блога были внесены следующие изменения:

  • Под ".post-body img" значение "padding: 10px" изменено на "padding: 0px" [Это убрало пространство между вертикалями изображений]

  • Под значением ".post-body" для "line-height: 1.4;" изменено на "line-height: 0;" [Это удаленное пространство между строками таблицы]

Более подробный ответ здесь:

http://xomisse.com/blog/tutorial-remove-spaces-between-images-in-blogger/

0 голосов
/ 22 августа 2013

Для переходного Doctype большинство предлагаемых решений в Интернете работает.

Но для Strict Doctype следующее удалит белую линию между двумя изображениями в <TD>: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

<title>Test</title>

</head>    
<body>

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

<tr><td><img style="display:block;" src="../images/test_blue.jpg"></td></tr>

<tr><td><img style="display:block;" src="../images/test_green.jpg"></td></tr>

</table>

</body>
</html>

Хотите опубликовать скриншот здесь, но недостаточно репутации, чтобы сделать это.

0 голосов
/ 10 августа 2011

Как вы архивируете свои данные?Мысль о сервере?

В некоторых текстовых редакторах вы можете выполнять поиск с регулярным выражением.Затем вы можете сделать это:

Поиск: 

<td>(\s*)(.*?)(\s*)</td>

Заменить: 

<td>$2</td>

Поиск: 

<td>[WHITE SPACE IF ANY]STRING[WHITE SPACE IF ANY]</td>

И заменить его на: 

<td>STRING</td>
...