Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Как сделать ячейку таблицы фиксированного размера, вне зависимости от контента

Вот есть некая разметка таблицы. Она предназначена чтобы на сайте было справа типо ссылки всякие, а справа само содержание статьи. По началу я сделал это и вроде всё норм, но вот решил тестануть и добавить ссылку с большим текстом, после чего результат получился как на скрине. А нужно чтобы всегда была ширина ячейки "col-md-3 col-sm-3 col-xs-2". Не понимаю как это реализовать . На классы не смотрите, там они пока что просто для названия ибо это тест версия.

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
<table class="row">
    <tr class="row">
        <td class="col-md-3 col-sm-3 col-xs-2" style="background-color:#e6e6e6;vertical-align:top;">                                   
            <ul class="listOfLinksToArticles col-md-12" style="list-style:none;padding-top:15px;background-color:#e6e6e6;">
                <li class="articleCategory">Введение</li>
                <li class="linkToArticle">
                    <a href="/Home/Articles?id=5">testtesttesttesttesttesttestesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</a>
                </li>
                <li class="linkToArticle">
                    <a href="/Home/Articles?id=5">qweqeq</a>
                </li>
                <li class="linkToArticle">
                    <a href="/Home/Articles?id=5">qweqeq</a>
                </li>
                <li class="linkToArticle">
                    <a href="/Home/Articles?id=5">qweqeq</a>
                </li>
                <li class="linkToArticle">
                    <a href="/Home/Articles?id=5">qweqeq</a>
                </li>
            </ul>            
        </td>
        <td class="col-md-9 col-sm-9 col-xs-10" style="background-color:#efeeee;padding-top:25px;">
            <div class="articleContent col-md-12">
                @Html.Raw(Model.content)
            </div>
            <div class="col-md-12 text-center">
                previous content next
            </div>
            <div class="articleComments col-md-12">
                Comments
            </div>
        </td>
    </tr>
</table>
Вот только это определено в файле стилей, остальное непосредственно прописано.
CSS
1
2
3
4
TD, TH {
    padding: 3px; /* Поля вокруг содержимого таблицы */
    border: 1px solid black; /* Параметры рамки */
}
Если не совсем понятно, то я объясню подробнее, если содержимое ячейки не такое большое т.е. не доходит до её границы, то тогда всё вроде бы норм, но вот когда превышает, то оно растягивается очень сильно (в зависимости от превышения), так вот мне необходимо чтобы всегда был фиксированный размер и ничего никуда не растягивалось при увеличении контента.
Хелпаните дураку пж.
Ответ: gen1usqq, тогда вместо
Сообщение от gen1usqq
table-layout: fixed;
используйте
CSS
1
overflow: scroll;
Добавлено через 57 секунд
И не забываем при просмотре изменений нажимать CTRL+F5 )))

Добавлено через 11 минут
.....А вообще-то должно работать. Может вы кеш не сбросили?

Вот пример
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
<tr>
    <td class="one">bla-bla-bla</td>
    <td>bla-bla-bla</td>
    <td>bla-bla-bla</td>
</tr>
<tr>
    <td>bla-bla-bla</td>
    <td class="two">bla-bla-bla</td>
    <td>bla-bla-bla</td>
</tr>
<tr>
    <td>bla-bla-bla</td>
    <td>bla-bla-bla</td>
    <td class="three">bla-bla-bla</td>
</tr>
</table>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
table{
    width:100%;
    table-layout:fixed;
}
tr, td{
border:1px red solid;
}
.one{
    height:90px;
    width:15%;
}
.two{
    height:150px;
    width:35%;
}
.three{
    height:300px;
    width:45%;
}
Вопрос: Таблица с фиксированным размером ячеек

На странице есть таблица с большим количеством ячеек, в одних немного текста, а в других, наоборот, много. В итоге таблица получается очень большая. Как сделать размеры её ячеек фиксированными, чтобы текст обрезался (скрывался), если он целиком не помещается?
Ответ: написано, как сделать
Вопрос: Точные размеры ячеек и границ

Перед о мной встала задача сделать шаблон спецификации с соблюдением гостовских размеров. Каждый лист спецификации представляет собой весьма сложную таблицу, каждое поле которой должно быть определенного размера. Я указывал размер ячеек в mm, и вроде бы все хорошо...
Но потом я понял, что ширина границы сумируется с размером ячейки. Предположим, ячейка должна быть шириной 20mm, а граница - 0,5mm. Следовательно, размер от границы до границы составит 21mm. Из-за этого размер всей таблицы по ширине у меня стал больше почти на сантиметр.
Собственно, высчитывать необходимый размер для каждой ячейки очень долгий и муторный процесс, тем более что на спецификации имеются два типа линии, отличающихся шириной. Есть ли какой-нибудь способ включать ширину border в размер ячейки, или, что можете мне посоветовать в данной ситуации?
Ответ: Мне не видно что у вас показывает dev-panel на F12 в firefox видно все размеры в цифрах и по блокам с линейками... и не нужно монитор лапать линейкой))... скорее всего у вас border-collapse двоится border или вообще cellspacing не установлен в 0... нужно как то это видеть через dev-panel... а ну и должен общий размер таблицы совпадать с размерами всех ячеек тоже иначе responsiv неизбежен наверное

Добавлено через 22 минуты
распечатайте и померьте, вроде 38px это 1,01см, может будет лучше в exel этим занятся
Вопрос: Не задается размер ячейки таблицы

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>
Вот сам код не могу задать размер ячейки в чём может быть проблема?
Ответ:
Сообщение от Fuzy
Мне нужно размер для конкретной ячейки задать
Сообщение от Fuzy
У меня ячейки одинакового размера...

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

Сообщение от Fedor92
желательно с картинками
В 13м посте это уже проходили.

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

Здравствуйте. Есть таблица из двух столбцов и нескольких строк. картинки в левом столбце 40px в высоту. в правом столбце нужно, чтобы ссылка была на весь размер ячейки и при этом текст выравнивался по центру по вертикали. у меня получается либо просто ссылка по центру (как в примере), но тогда она не достает до нижней и верхней части ячейки, либо ссылка на весь размер, но текст выравнен по верху. можно ли как то решить задачу?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="moduletable linkslist40">
<table class=" linkslist40">
<tbody>
<tr>
<th><img src="1.png" alt="" /></th>     
<td>
<a href="ссылка1" target="_blank" rel="nofollow"><span>ссылка1</span></a></td>
</tr>       
<tr>
<th><img src="2.png" alt="" /></th>     
<td>
<a href="ссылка2" target="_blank" rel="nofollow"><span>ссылка2</span></a></td>
</tr>       
<tr>
<th><img src="3.png" alt="" /></th>     
<td>
<a href="ссылка3" target="_blank" rel="nofollow"><span>ссылка3</span></a></td>
</tr>       
</tbody>
</table>
</div>
Ответ: С font-size 40px? ☺ не могу сейчас с телефона проверить там, но на практике, если я задаю высоту height 40px для span или для самой ссылки, то ее высота становиться равна ячейке, но текст отображается по верхнему краю. Я не могу здесь использовать отступы, чтобы выравнять его вручную и не могу использовать line-height, который решает задачу, но если текст ссылки отображается в две строки, то ячейка увеличивается в два раза по высоте. Соответственно, у меня в такой конфигурации либо текст по центру, но ссылка узкая по высоте, либо ссылка во всю высоту, но текст по верхней границе. Выравнивание по высоте действует в ячейке таблицы, но если увеличить высоту самой ссылки, то внутри элемента ссылки текст выравнен по верхнему краю и в нем выравнивание по высоте не работает. Возможно, надо както изменить html, но не могу придумать как

Добавлено через 12 часов 1 минуту
проверил и в jsfiddle. как я и говорил, ссылка по центру, но не достает до границ ячейки снизу и сверху. ячейка таблицы реагирует цветом на курсор, но ссылка будет работать только в центре
Вопрос: Нестандартная таблица. Разные размеры ячеек

Доброго времени суток, уважаемые форумчане!

На html-странице есть набор вот таких элементов (рис.1). Решил сделать в виде таблицы. Каждым элементом таблицы является блок с товаром (общая структура). По конкретному блоку, снаружи div с закругленными краями, внутри table с тремя строками (рис.2). Кстати, границ таблицы, не должно быть видно; я их нарисовал, чтобы было легче объяснить суть проблемы.

Что нужно сделать: чтобы границы ячеек (отмечены зелеными стрелками) находились в таком положении, как на рисунке.

Что сделано: границы ячеек находятся на одной вертикали. Если я подгоняю размер в первой строке, то размер в третьей строке автоматически подстраивается под первую. Если подгоняю размер в третьей, то автоматически подстраивается первая. Пробовал задавать свойством width для конкретной строки с помощью селектора по классу. В итоге, текстовая строка, написанная в ячейке Comments съезжает.

Вопрос: как сделать | правильно ли я вообще делаю ?

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

Код фрагмента доступен по ссылке (старался подробно прокомментировать):
Ответ:
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
    <tr>
        <td class="sign" colspan="2">какая-то надпись тут</td>
        <td class="ico">.ico</td>
    </tr>
    <tr>
        <td class="img" colspan="3"><img src="https://gshaw0.files.wordpress.com/2012/10/shocked_cat1.jpg" alt=""></td>
       
    </tr>
    <tr>
        <td class="star">&star;&star;&star;&star;&star;</td>
        <td class="comments" colspan="2">comments </td>
    </tr>
</table>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
table{
    border-collapse:collapse;
    width:300px;
}
td{
    border:1px solid #333;
}
.sign{
    width:70%;
}
.ico{
    width:30%;
}
.star{
    width:60%;
}
.comments{
    width:40%;
}
.img{
    vertical-align:middle;
    text-align:center;
}

Вопрос: Размер ячеек

Есть такой код для создания поля из 12х12 ячеек.

<div id="main"></div>

<script type="text/javascript">
var main = document.getElementById( "main" );

var tileW = 50;
var tileH = 45;

for ( var i = 0; i < 12; i++ ) {
	for ( var j = 0; j < 12; j++ ) {
		var tile = document.createElement( "DIV" );
		main.appendChild( tile );
		tile.style.cssText = "background-color: #cccccc; border: 1px dashed #eeeeee; position: absolute";
		tile.style.height = tileH;
		tile.style.width = tileW;
		tile.style.top = tileH * i;
		tile.style.left = tileW * j;
	}
}
</script>


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

Было решено измерять глубину ячейки () вот такой функцией:

function Q( i, j ) {
	var lvl = Math.min( i, j, 11 - i, 11 - j );
	return [ 1.6, 1.4, 1.2, 0.8, 0.6, 0.4 ][lvl];
}


Она вычисляет, на сколько умножать размеры ячейки. Т.е. для крайних (с lvl=0) будет умножаться на 1.6, а для самых центральных - на 0.4

Позицию ячейки надо теперь тоже считать по-другому, поэтому сделал для этого функцию:

function S( r ) {
	var s = 0;
	for (var i = 0; i < r; i++) {
		var t = i < 6 ? i : r - i - 1;
		s += [ 1.6, 1.4, 1.2, 0.8, 0.6, 0.4 ][t];
	} 
	return s.toFixed(1);
}


Она вместо i, j возвращает новые множители для top и left с учётом масштабирования Q() -

Теперь в коде умножаю размеры ячейки на Q(i, j), а координаты - вместо top = height * i подаю top = height * S(i) и так же с left. Но получается

<div id="main"></div>

<script type="text/javascript">
var main = document.getElementById( "main" );

var tileW = 50;
var tileH = 45;

for ( var i = 0; i < 12; i++ ) {
	for ( var j = 0; j < 12; j++ ) {
		var tile = document.createElement( "DIV" );
		main.appendChild( tile );
		tile.style.cssText = "background-color: #cccccc; border: 1px dashed #eeeeee; position: absolute";
		tile.style.height = tileH * Q(i, j);
		tile.style.width = tileW * Q(i, j);
		tile.style.top = tileH * S(i);
		tile.style.left = tileW * S(j);
		tile.onclick = function () { this.style.display = "none" };
	}
}

function Q( i, j ) {
	var lvl = Math.min( i, j, 11 - i, 11 - j );
	return [ 1.6, 1.4, 1.2, 0.8, 0.6, 0.4 ][lvl];
}

function S( r ) {
	var s = 0;
	for (var i = 0; i < r; i++) {
		var t = i < 6 ? i : r - i - 1;
		s += [ 1.6, 1.4, 1.2, 0.8, 0.6, 0.4 ][t];
	} 
	return s.toFixed(1);
}
</script>


Где я ошибся в расчётах, может есть готовое решение?
В идеале хотелось бы задавать "центр" вручную (например, ячейки уменьшаются не чем ближе к центру, а чем ближе к ячейке i=3; j=9).
Ответ:
Сообщение от Diphenyl Oxalate
В идеале хотелось бы задавать "центр" вручную
...из былого ... ... провести по таблице курсором
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  *{
    padding: 0;
    margin: 0;
  }

  .cell {
    text-align: center;
     float: left;
     height: 23px;
     width: 23px;
     border: #0000CD 1px solid;
     background-color: #FFEBCD;
     font-size: 12px;
     -webkit-transition: all .5s ease-in-out;
     -moz-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
     transition: all .5s ease-in-out;
  }
  #matrix{
    display: inline-block;
    margin: 50px auto;
  }
  .red{
    border-radius: 4px;
    background:  #FF0F0F;
  }
  .cell:hover{
    border-radius: 4px;
    background: #0000CD;
  }

   .yellow{
     background: #FFFF00;
   }
  .green{
    background: #008000;
  }
  .blue{
    background: #0000FF
  }
  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
       var matrix = document.getElementById('matrix'),
            l = 24, //ширина  можно менять
            t = 16, //высота
            n = l * t;

        function createMatrix() {
            var w;
            for (var i = 0; i < n; i++) {
                var div = document.createElement('div');
                div.className = 'cell';
                div.dataset.index = i;
                matrix.appendChild(div);
                if (i == l - 1) {
                    w = matrix.offsetWidth + 1;
                }
            }
            matrix.style.width = w + 'px';
            matrix.style.display = 'block'
        }

        function chec(indx, size) {
            var s = [], m = [],
                x = indx % l,
                y = indx / l | 0;
            size = size || 1;
            for (var i = y - size; i <= y + size; i++) {
                for (var k = x - size; k <= x + size; k++) {
                    var num = k + i * l, max = Math.max(Math.abs(i-y),Math.abs(k-x));
                    i > -1 && i < t && k > -1 && k < l && num < (i * l + l) && num != indx && (s.push(num),m.push(max) )

                }
            }
            return {s : s, m : m}
        }

     createMatrix(); //создание поля игры
     var divs = [].slice.call(document.querySelectorAll('.cell'),0); //массив клеток с которым будем работать
     var Q = [1, .8, .6, .4 ]
     matrix.addEventListener('mousemove', function (event) {
     var el = event.target, cls = el.classList;
    if(cls && cls.contains('cell')) {
       var index = el.dataset.index;
       var arr = chec(index, 3);
       divs.forEach(function(el,i) {
       var k = arr.s.indexOf(i);
       var m = arr.m[k];
       m = Q[m];
       m = 'scale('+m+')'
       k !== -1 ? (el.classList.add('red'),el.innerHTML=arr.m[k],el.style.transform = m ): (el.classList.remove('red'),el.innerHTML='', el.style.transform = '');
     });
     }

  });

    });
  </script>
</head>

<body>
<div id="matrix" ></div>

</body>
</html>
Вопрос: Определить размеры ячейки таблицы.

Есть таблица:
<body onload=getCellSize();>
<table>
  <tr>
     <td>&nbsp;</td>
     <td id="mycell">&nbsp;</td>
  <tr>
</table>
<body>
function getCellSize()
{
  alert(document.getElementById("mycell").width);
  alert(document.getElementById("mycell").heigth);
}

Alert'Ы ничего не возвращают !!!
Как определить размер ячейки?
(style.width тоже ничего не возвращает)
Ответ: здесь хорошо рассказано о получении размеров элементов
Вопрос: Таблица фиксированной высоты со скролом

Здравствуйте, не получается сделать таблицу фиксированной высоты со скролом, т.е. Таблица со справочной информации, вытягивает страницу, а у меня в ней больше 100 записей. Как можно сделать такую таблицу высотой в 25 строк.
?

Добавлено через 3 минуты
CSS
1
2
  overflow: auto;
     height: 300px;
это не помогает...
Ответ: Спасибо, решил так же. внимательно прогуглив понял что нужно стили к <div> применять а не к таблице) Но все равно огромное спасибо)
Вопрос: Таблица. Фиксированный заголовок, столбец.

Для сводных отчетов нужно, чтобы несколько колонок слева и заголовок оставались на месте, а данные прокручивались. Находил много решений, но они использовали библиотеки типа jQuery или были сложны в реализации (не учитывалось объединение ячеек)
Мне хотелось сделать что-то универсальное и простое. Вроде получилось :)   Области фиксируются вызовом функции
FixHeaderCol(<таблица>, <сколько фиксировать строк>, <сколько фиксировать столбцов>, <ширина таблицы>, <высота таблицы>)
Успешно работает в IE10, новой Опере, Мозилле, Хроме.
Демо
Исходники с комментариями

З.Ы. Функция setSum в реальных проектах не нужна, она заполняет пустые ячейки случайными числами
table fix header column таблица фиксированный заголовок столбец области прокручиваемый
Ответ: Да офигенно! Очень полезная вещь!