Таблица CSS Styling (макет)

Question

В настоящее время я работаю на небольшом веб-сайте, и теперь у меня есть несколько проблем. Мой css действительно хуже, у меня почти нет подсказки, как что-то делать.

Справа от сайта этого сайта.

http://s526367159.online.de/reclaim/website/home-one-page/

Вы можете увидеть окно с некоторыми картинами в нем. Это не выглядит действительно хорошо. Самое легкое решение, на мой взгляд, будет добавление .png-изображения, созданного в Photoshop, в этом поле, но я хотел бы сделать это с .css, так как я трачу много времени на то, чтобы этот материал работал.

Вопрос теперь в том, можно ли добавлять границы и делать небольшие снимки немного более разнесенными друг к другу, не добавляя тонны кода для каждого ""?

Это базовый код.

<style type="text/css"> 
.tg {border-collapse:collapse;border-spacing:0;margin:0px auto;} 
.tg td{border-style:solid;border-color:#2a1c14;border-width:1px;overflow:hidden;} 
</style> 
<table class="tg"> 
    <tr> 
    <td class="tg-031e"><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/07/IMAG0587.jpg" width="42" height="42" /></a></td> 
    <td class="tg-031e"><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_blut_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_frost_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_unheilig_grau.jpg" width="32" height="32" /></td> 
    </tr> 
    <tr> 
    <td class="tg-031e"><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/07/druide.jpg" width="42" height="42" /></a></td> 
    <td class="tg-031e"><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_w%C3%A4chter_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_feral_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_eule_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_baum_grau.jpg" width="32" height="32" /></td> 
    </tr> 
</table> 

действительно понравится здесь.

Answer 1

Попробуйте добавить это правило:

.md-tabs .tab-content img{ 
    margin: 3px; 
    border: 1px solid white; 
} 

Изменение пикселей и цвет все, что вы хотите.

Если вы хотите, чтобы ваше правило css было более конкретным, просто используйте непосредственных родителей.

Answer 2

Вы можете добавить новую строку в ваши стили, подобных этому

.tg img{margin: 5px; border: 1px solid red;} 

Это изменит стиль всех IMG тегов в этой таблице.

Answer 3

У вас сломанный в середине вашего кода.

Что вы можете сделать, это просто добавить класс с небольшим стилем и применить его к каждому изображению.

<style type="text/css"> 
.tg {border-collapse:collapse;border-spacing:0;margin:0px auto;} 
.tg td{border-style:solid;border-color:#2a1c14;border-width:1px;overflow:hidden;} 
.spacing {padding:3px;} 
</style> 
<table class="tg"> 
<tr> 
    <td class="tg-031e "> 
     <img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/07/IMAG0587.jpg" width="42" height="42" /> 
    </td> 
    <td class="tg-031e"> 
     <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_blut_grau.jpg" width="32" height="32" /> 
     <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_frost_grau.jpg" width="32" height="32" /> 
     <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_unheilig_grau.jpg" width="32" height="32" /> 
    </td> 
</tr> 
<tr> 
    <td class="tg-031e"> 
     <img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/07/druide.jpg" width="42" height="42" /> 
    </td> 
    <td class="tg-031e"> 
     <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_w%C3%A4chter_grau.jpg" width="32" height="32" /> 
     <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_feral_grau.jpg" width="32" height="32" /> 
     <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_eule_grau.jpg" width="32" height="32" /> 
     <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_baum_grau.jpg" width="32" height="32" /> 
    </td> 
</tr> 

Или вы могли бы сделать что-то вроде этого

.md-tabs .tab-content img{ 
padding: 3px; 
}