Jump to content

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

LyalinDV
 Share Followers 0

Recommended Posts

LyalinDV

LyalinDV 13

Posted
Posted

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

 

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

<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>

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

Link to post
Share on other sites
dee0xeed

dee0xeed 36

Posted
Posted

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

Например, если экран будет менее 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;}
}
Link to post
Share on other sites
tvskit

tvskit 259

Posted
Posted 

<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;
Link to post
Share on other sites
LyalinDV

LyalinDV 13

Posted
  • Author
Posted

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

 

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

<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>

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

Link to post
Share on other sites
  • Administrators
DevilStar

DevilStar 1166

Posted
  • Administrators
Posted 


<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>

 

Link to post
Share on other sites
tvskit

tvskit 259

Posted
Posted 
<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>

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

Link to post
Share on other sites
LyalinDV

LyalinDV 13

Posted
  • Author
Posted 
<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>

 

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

Link to post
Share on other sites
LyalinDV

LyalinDV 13

Posted
  • Author
Posted 
<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, мне необходимо такую же, по такому же принципу

Link to post
Share on other sites
tvskit

tvskit 259

Posted
Posted

Я ссылку с примером чуть выше предоставил. Там таблица из 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 ячеек.

Link to post
Share on other sites
LyalinDV

LyalinDV 13

Posted
  • Author
Posted

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

<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>
Link to post
Share on other sites
tvskit

tvskit 259

Posted
Posted 
<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:

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Followers 0
Go to topic listing

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...