Sign in to follow this  
Followers 0
LyalinDV

Стили для DIV таблиц

15 posts in this topic

Добрый день! Пытаюсь адаптировать свои таблицы, но столкнулся с проблемой.

 

Есть таблица:

<div style="width: 100%;">
<div style="width: 50%; float: left; border: 0px solid black; text-align: center;">Ячейка1</div>
<div style="width: 50%; float: left; border: 0px solid black; text-align: center;">Ячейка2</div>
</div>

При уменьшении экрана Ячейка2 смещается под первую, но при этом обе ячейки расположены слева. Мне необходимо, чтобы при уменьшении экрана Ячейка2 располагалась под первой, но при этом обе ячейки были выровнены по центру. Подскажите как это реализовать?

 

Если вместо left делать такой код:

<div style="width: 100%;">
<div style="width: 50%; float: centr; border: 0px solid black; text-align: center;">Ячейка1</div>
<div style="width: 50%; float: centr; border: 0px solid black; text-align: center;">Ячейка2</div>
</div>

Они изначально и без уменьшения экрана расположены друг под другом.

Share this post


Link to post
Share on other sites

Можно при определенном размере экрана менять стили.

Например, если экран будет менее 400 пикселей, то внутренние блоки выравниваются по центру:

<div class="block1">
  <div class="block2">Ячейка1</div>
  <div class="block2">Ячейка2</div>
</div>

css:

.block1 {
  width: 100%;
 }
.block2 {
  width: 50%;
  float: left;
  border: 0px solid black;
  text-align: center;
}
@media (max-width: 400px) {
  .block2 {
    float: none;
    margin: 0 auto;}
}
stay_strong likes this

Share this post


Link to post
Share on other sites

<title>проба</title>
<style>
.body {
    min-width: 666px;
    max-width: 6666px;
    text-align: center;
}
.div1 {
	min-width: 330px; /* если меньше 330 то ....., если max-width: больше то ... и т.д. */
    width: 50%;
	float: left; 
    border: 0px solid black;
	text-align: center;
}
.div2 {
	min-width: 330px; (добавил)
    width: 50%;
	float: left; 
    border: 0px solid black;
	text-align: center;
}
</style>
</head>

<body>

<div style="width: 100%;">
<div class="div1">Ячейка1</div>
<div class="div2">Ячейка2</div>
</div>

Как то так

 

ПС. Простите, чёт я немного перестарался. Вот так

<div style="width: 100%;">
<div style="min-width: 330px; width: 50%; float: left; border: 0px solid black; text-align: center;">Ячейка1</div>
<div style="min-width: 330px; width: 50%; float: left; border: 0px solid black; text-align: center;">Ячейка2</div>
</div>
Ключевое слово min-width: 330px;

Share this post


Link to post
Share on other sites

Что-то не получается....

 

Сейчас таблица выглядит так:

<div style="width: 100%;">
<div style="float: centr; width: 100%;">
<div style="float: left; border: 0px solid black; text-align: center;">Ячейка1</div>
<div style="float: left; border: 0px solid black; text-align: center;">Ячейка2</div>
<div style="float: left; border: 0px solid black; text-align: center;">Ячейка3</div>
<div style="float: left; border: 0px solid black; text-align: center;">Ячейка4</div>
<div style="float: left; border: 0px solid black; text-align: center;">Ячейка5</div>
</div>
</div>

Надо эту таблицу выравнять по центру.

 

Через код

<div style="width: 100%;">
<div style="min-width: 330px; width: 50%; float: left; border: 0px solid black; text-align: center;">Ячейка1</div>
<div style="min-width: 330px; width: 50%; float: left; border: 0px solid black; text-align: center;">Ячейка2</div>
</div>

таблица просто на два столбца выравнивается и не по центру

Share this post


Link to post
Share on other sites

<div style=" width: 100%;text-align: center;position: relative;display: flex;">

<div style="/* float: left; */border: 0px solid black; text-align: center;width: 20%;">Ячейка1</div>

<div style="/* float: left; */ border: 0px solid black; text-align: center;width: 20%;">Ячейка2</div>

<div style="/* float: left; */ border: 0px solid black; text-align: center;width: 20%;">Ячейка3</div>

<div style="/* float: left; */ border: 0px solid black; text-align: center;width: 20%;">Ячейка4</div>

<div style="/* float: left; */ border: 0px solid black; text-align: center;width: 20%;">Ячейка5</div>

</div>

 

Share this post


Link to post
Share on other sites
<div style="width: 100%;">
<div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка1</div>
<div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка2</div>
<div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка3</div>
<div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка4</div>
<div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка5</div>
</div>

Может так? Я не понимаю вас, почему не знаю. Что вы хотите?

Share this post


Link to post
Share on other sites
<div style=" width: 100%;text-align: center;position: relative;display: flex;">
<div style="/* float: left; */border: 0px solid black; text-align: center;width: 20%;">Ячейка1</div>
<div style="/* float: left; */ border: 0px solid black; text-align: center;width: 20%;">Ячейка2</div>
<div style="/* float: left; */ border: 0px solid black; text-align: center;width: 20%;">Ячейка3</div>
<div style="/* float: left; */ border: 0px solid black; text-align: center;width: 20%;">Ячейка4</div>
<div style="/* float: left; */ border: 0px solid black; text-align: center;width: 20%;">Ячейка5</div>
</div>

 

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

Share this post


Link to post
Share on other sites
<div style="width: 100%;">
<div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка1</div>
<div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка2</div>
<div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка3</div>
<div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка4</div>
<div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка5</div>
</div>

Может так? Я не понимаю вас, почему не знаю. Что вы хотите?

 

 

Я ссылку с примером чуть выше предоставил. Там таблица из 3х4, мне необходимо такую же, по такому же принципу

Share this post


Link to post
Share on other sites

Я ссылку с примером чуть выше предоставил. Там таблица из 3х4, мне необходимо такую же, по такому же принципу

ССылку не заметил

<title>проба</title>
<style>
.talbtrabl {
display: inline-block;
padding: 5px;
margin: 5px;
width: 100%;
text-align: center;
border: #c5c6c6 1px solid;
vertical-align: top;
}
.div1 {
	display: inline-block;
	padding: 5px;
	margin: 5px;
	width: 230px;
	text-align: center;
	border: #c5c6c6 1px solid;
	vertical-align: top;
}

</style>
</head>

<body>

<div class="talbtrabl">
<div class="div1">Ячейка1</div>
<div class="div1">Ячейка2</div>
<div class="div1">Ячейка3</div>
<div class="div1">Ячейка4</div>
<div class="div1">Ячейка5</div>
<div class="div1">Ячейка6</div>
<div class="div1">Ячейка7</div>
<div class="div1">Ячейка8</div>
<div class="div1">Ячейка9</div>
<div class="div1">Ячейка10</div>
<div class="div1">Ячейка11</div>
<div class="div1">Ячейка12</div>
</div>

</body>

</html>

НУ а что не получалось то? Всё то же самое, только 5 ячеек.

Share this post


Link to post
Share on other sites

Проблема решилась так, может кому надо:

<div style="display: block; text-align: center"> 
<div style="width: 200px; display: inline-block">Ячейка1</div> 
<div style="width: 200px; display: inline-block">Ячейка2</div> 
</div>  

Share this post


Link to post
Share on other sites
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>проба</title>
<style>
.talbtrabl {
display: inline-block;
padding: 5px;
margin: 5px;
width: 100%;
text-align: center;
border: #c5c6c6 1px solid;
vertical-align: top;
}
.div1 {
	display: inline-block;
	padding: 5px;
	margin: 5px;
	width: 230px;
	text-align: center;
	border: #c5c6c6 1px solid;
	vertical-align: top;
}
.img {
max-width: 100%;
height: auto;
}
</style>
</head>

<body>

<div class="talbtrabl">
<div class="div1">Ячейка1 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/0.jpg"></img></div>
<div class="div1">Ячейка2 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/1.jpg"></img></div>
<div class="div1">Ячейка3 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/2.jpg"></img></div>
<div class="div1">Ячейка4 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/3.jpg"></img></div>
<div class="div1">Ячейка5 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/4.jpg"></img></div>
<div class="div1">Ячейка6 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/5.jpg"></img></div>
<div class="div1">Ячейка7 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/6.jpg"></img></div>
<div class="div1">Ячейка8 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/7.jpg"></img></div>
<div class="div1">Ячейка9 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/8.jpg"></img></div>
<div class="div1">Ячейка10 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/9.jpg"></img></div>
<div class="div1">Ячейка11 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/10.jpg"></img></div>
<div class="div1">Ячейка12 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/11.jpg"></img></div>
</div>

</body>

</html>

Круче чем оригинал :lol:

Share this post


Link to post
Share on other sites

А может есть способ выравнять содержимое ячейки по вертикали?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.