Не задается размер ячейки таблицы

@Fuzy · Регистрация: 18.11.2016

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home Work №4</title>
<style>
td{
    border:1px solid black;
}
.table {
    border:3px solid green;
    width:580px;
    height:600px;
}
.content{
    width: 550px;
    height: 100px;
    border:2px solid red;
    margin-left: 10px; 
  margin-top: 10px;
    
}
.cont{
    width: 550px;
    height: 50px;
    border:2px solid red;
      margin-top: 10px;
    margin-left: 10px;
}
.con{
    border:2px solid red;
    width: 550px;
    height: 300px;
    margin-top: 10px;
    margin-left: 10px;
}
.coner{
    width: 550px;
    height: 90px;
    border:2px solid red;
    margin-left: 10px; 
  margin-top: 10px;
    
}
 
.conter{
 border:2px solid blue;
}
.bd{
 border:2px solid blue;
 width:100px;
 height:30px;
}
</style>
</head>
<body>
<table class="table"><!— вот тут padding - не имеет смысла для таблиц вообще —> 
<tr><td style="padding-bottom: 10px;">
<table class="content">
    
</table>
<table class="cont">
    <tr>
        <td style="height:15px">&nbsp</td>
        <td class="bd">&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
    </tr>
</table>
<table class="con">
    <tr>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
    </tr>
</table>
<table class="coner">
        <tr>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
    </tr>
</table>
</td></tr>
 
</table>
 
</body>
</html>

Вот сам код не могу задать размер ячейки в чём может быть проблема?

@mrtoxas · 07.01.2017, 14:50

У вас есть Microsoft Excel под рукой, или другой редактор таблиц? Попробуйте задать высоту только одной ячейки.

@Fuzy · 07.01.2017, 15:09 **[ТС]**

Пробовал задавать width задается , а height нет

@mrtoxas · 07.01.2017, 15:13

Fuzy, объяснять или после манипуляций с табличными редакторами стало понятно?

Вы можете попробовать визуально сделать эту ячейку меньше, задав ей border, используя псевдоэлементы.

@Fuzy · 07.01.2017, 15:20 **[ТС]**

Можно пример пожалуйста если не сложно , а то не понял

@mrtoxas · 07.01.2017, 15:33

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    table {
      border-collapse: collapse;
    }
    
    table td {
      width: 100px;
      height: 50px;
    }
    
    table td:not(.original) {
      border: 1px solid black;
    }
    
    .original {
      position: relative;
    }
    
    .original:after {
      content: '';
      position: absolute;
      top: 5px;
      bottom: 5px;
      left: 0;
      right: 0;
      border-top: 1px solid black;
      border-bottom: 1px solid black;
    }
  </style>
</head>
 
<body>
  <table>
    <tr>
      <td></td>
      <td></td>
      <td class="original">
      </td>
      <td></td>
    </tr>
  </table>
</body>
 
</html>

@Fuzy · 07.01.2017, 15:39 **[ТС]**

А по другому не как не можно задать? а то мне много ячеек нужно сделать ,а таким методом это сложно

У меня просто вообще получилась ячейка в ячейке ...

@mrtoxas · 07.01.2017, 15:49

А кто говорил, что будет легко? Вот эти мучения вам и дадут понять, что таблицы для этих целей лучше не использовать. И да, я знаю, что это только обучения ради

Есть еще вариант, вкладывайте div'ы в td. И задавайте border div'ам, а не ячейкам. А ячейки используйте просто в качестве каркаса.

Сообщение от Fuzy

У меня просто вообще получилась ячейка в ячейке

Потому что, вы задали border всем ячейкам, а надо было задать всем, кроме той, которую вы собрались менять. Я же сказал, что высоту отдельной ячейки можно поменять только визуально.

@Fuzy · 07.01.2017, 16:19 **[ТС]**

На дивах я сделал , а вот на таблицах не как не могу и ещё мне нужно точно такая как на дивах и это каждой ячейке высоту задавать??

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home Work N4</title>
</head>
<body>
    <div style="border: 4px solid green; width: 580px;height: 600px">
 
        <div style="border:4px solid red; width: 550px;height: 80px;margin: 10px">
 
            <div style="border:4px solid blue; width: 140px;height: 50px;margin: 10px;float:left;margin-left: 10px;margin-right: 1px;"></div>
 
            <div style="border:4px solid blue; width: 220px;height: 50px;margin: 10px 1px; float:left"></div>
 
            <div style="border:4px solid blue; width: 140px;height: 50px;margin: 10px 1px;float:left">
                <div style="border:4px solid yellow; width:110px;height: 10px; margin: 10px 1px;float:left;margin-left: 10px;margin-right: 10px;margin-bottom: 1px;margin-top: 5px;"></div>
                <div style="border:4px solid yellow; width:110px;height: 10px; margin: 10px 1px;float:left;margin-left: 10px;margin-right: 10px;margin-bottom: 5px;margin-top: 1px;"></div>
            </div>
 
        </div>
        <div style="border:4px solid red; width: 550px;height: 40px;margin: 10px; float:left">
            <div style="border:4px solid blue; width: 130px;height: 15px;margin: 10px; float:left;margin-right: 1px;"></div>
            <div style="border:4px solid blue; width: 115px;height: 15px;margin: 10px; float:left;margin-left: 1px;margin-right: 1px;"></div>
            <div style="border:4px solid blue; width: 115px;height: 15px;margin: 10px; float:left;margin-left: 1px;margin-right: 1px;"></div>
            <div style="border:4px solid blue; width: 130px;height: 15px;margin: 10px; float:left;margin-left: 1px;"></div>
        </div>
 
        <div style="border:4px solid red; width: 550px;height: 300px;margin: 10px; float:left">
 
            <div style="border:4px solid blue; width: 150px;height: 270px;margin: 10px; float:left;margin-right: 1px;"></div>
 
            <div style="border:4px solid blue; width: 340px;height: 270px;margin: 10px; float:left">
                <div style="border:4px solid yellow; width: 310px;height: 200px;margin: 10px; float:left;margin-bottom: 1px;"></div>    
                <div style="border:4px solid yellow; width: 310px;height: 25px;margin: 10px; float:left"></div>
            </div>
 
        </div>
 
        <div style="border:4px solid red; width: 550px;height: 70px;margin: 10px; float:left">
            <div style="border:4px solid blue; width: 140px;height: 43px;margin: 10px; float:left;margin-right: 1px;">
                <div style="border:4px solid yellow; width:110px;height: 7px; margin: 10px 1px;float:left;margin-left: 10px;margin-right: 10px;margin-bottom: 1px;margin-top: 5px;"></div>
                <div style="border:4px solid yellow; width:110px;height: 7px; margin: 10px 1px;float:left;margin-left: 10px;margin-right: 10px;margin-bottom: 5px;margin-top: 1px;"></div>
            </div>
 
            <div style="border:4px solid blue; width: 220px;height: 43px;margin: 10px 2px 10px; float:left;margin-left: 1px;margin-right: 1px;"></div>
 
            <div style="border:4px solid blue; width: 140px;height: 43px;margin: 10px 2px 10px; float:left;margin-left: 1px;margin-right: 10px;"></div>
        </div>
 
    </div>
</body>
</html>

@mrtoxas · 07.01.2017, 19:52

Сообщение от Fuzy

мне нужно точно такая как на дивах

Я в вашей "блочной работе" не вижу ту ячейку, которую надо уменьшить - они у вас все одинаковые.

@Fuzy · 08.01.2017, 12:18 **[ТС]**

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

@mrtoxas · 08.01.2017, 12:28

Fuzy, То, что вы пытаетесь создать таблицу, такую же, как вы создали при помощи блоков, это уже давно понятно. Тема называется "Не задается размер ячейки таблицы". Размер какой именно ячейки вы не можете задать? Покажите стрелочкой на вашем последнем скрине, где именно та ячейка, размер которой надо задать.

@Fuzy · 08.01.2017, 12:38 **[ТС]**

1 скрин это как нужно , а на 2 видно где не получается ...

@mrtoxas · 08.01.2017, 13:13

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    table {
      width: 500px;
      border: 3px solid green;
      border-spacing: 5px 10px;
      padding: 0 5px;
    }    
    table .unknown td {
      border: 1px solid blue;
      height: 30px;
    }
  </style>
</head>
<body>
  <table>
    <tr class="unknown">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</body>
</html>

@Fedor92 · 08.01.2017, 13:22

Добавляем стиль:

CSS
1
*{box-sizing:border-box}

Используем код, который дал mrtoxas и у Вас получится аккурат 30px по высоте...   - можно убрать из кода... Остальные ячейки аналогично...

@Fuzy · 10.01.2017, 12:52 **[ТС]**

Размер меняется вместе с строкою , а мне нужно размер для конкретной ячейки задать

@Fedor92 · 10.01.2017, 13:00

Сообщение от Fuzy

Размер меняется вместе с строкою , а мне нужно размер для конкретной ячейки задать

А Вы хорошо представляете себе, что такое таблица? Если несколько ячеек находятся в одной строке, то высота любой ячейки будет равна максимальной высоте ячейки в данной строке...

@Fuzy · 10.01.2017, 13:08 **[ТС]**

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

@Fedor92 · 10.01.2017, 13:28

Сообщение от Fuzy

Вот сам код не могу задать размер ячейки в чём может быть проблема?

Сообщение от Fuzy

Пробовал задавать width задается , а height нет

Вы уже всех запутали и сами запутались... Вопрос Ваше темы: "Не задается размер ячейки таблицы"... Я Вам на него и отвечаю...

Сообщение от Fuzy

У меня ячейки одинакового размера мне главное чтоб строка в размере не менялась

Если меняется высота ячейки - меняется и высота строки... А теперь немного повангуем... Наверно Вы хотите сделать отступ между границами строки и границами ячеек? Тогда Вам в помощь свойство border-spacing, если нет, то пора менять формулировку вопроса и желательно с картинками...

@mrtoxas · 10.01.2017, 13:36

Сообщение от Fuzy

Мне нужно размер для конкретной ячейки задать

Сообщение от Fuzy

У меня ячейки одинакового размера...

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

Сообщение от Fedor92

желательно с картинками

В 13м посте это уже проходили.

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

Новые блоги и статьи Все статьи Все блоги /
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	07.01.2017, 14:50
	У вас есть Microsoft Excel под рукой, или другой редактор таблиц? Попробуйте задать высоту только одной ячейки. 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	07.01.2017, 15:09 [ТС]
	Пробовал задавать width задается , а height нет 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	07.01.2017, 15:13
	Fuzy, объяснять или после манипуляций с табличными редакторами стало понятно? Вы можете попробовать визуально сделать эту ячейку меньше, задав ей border, используя псевдоэлементы. 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	07.01.2017, 15:20 [ТС]
	Можно пример пожалуйста если не сложно , а то не понял 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	07.01.2017, 15:39 [ТС]
	А по другому не как не можно задать? а то мне много ячеек нужно сделать ,а таким методом это сложно У меня просто вообще получилась ячейка в ячейке ... Миниатюры 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	08.01.2017, 12:18 [ТС]
	Ну вот то что на дивах получилось нужно так же на таблице сделать основной каркас я сделал , а дальше не могу размер задать чтоб все как на фото было Миниатюры 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	08.01.2017, 12:28
	Fuzy, То, что вы пытаетесь создать таблицу, такую же, как вы создали при помощи блоков, это уже давно понятно. Тема называется "Не задается размер ячейки таблицы". Размер какой именно ячейки вы не можете задать? Покажите стрелочкой на вашем последнем скрине, где именно та ячейка, размер которой надо задать. 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	08.01.2017, 12:38 [ТС]
	1 скрин это как нужно , а на 2 видно где не получается ... Миниатюры 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	10.01.2017, 12:52 [ТС]
	Размер меняется вместе с строкою , а мне нужно размер для конкретной ячейки задать 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	10.01.2017, 13:08 [ТС]
	У меня ячейки одинакового размера мне главное чтоб строка в размере не менялась , а в свой код задать я так не могу ячейки в плотную к строке прижаты... 0