Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: html table

Приветствую!

Есть таблица, которую можно увидеть  (Зашла в аккаунт, что дальше?)

так вот
как сделать тайтлы вертикальными слева?

Код

<div class="CSSTableGenerator" >
                <table >
                    <tr>
                        <td>
                            Title 1
                        </td>
                        <td >
                            Title 2
                        </td>
                        <td>
                            Title 3
                        </td>
                        <td>
                            Title 1
                        </td>
                        <td >
                            Title 2
                        </td>
                        <td>
                            Title 3
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Row 1
                        </td>
                        <td>
                            Row 1
                        </td>
                        <td>
                            Row 1
                        </td>
                        <td >
                            Row 1
                        </td>
                        <td>
                            Row 1
                        </td>
                        <td>
                            Row 1
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                        <td >
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Row 4
                        </td>
                        <td>
                            Row 4
                        </td>
                        <td>
                            Row 4
                        </td>
                        <td >
                            Row 4
                        </td>
                        <td>
                            Row 4
                        </td>
                        <td>
                            Row 4
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Row 3
                        </td>
                        <td>
                            Row 3
                        </td>
                        <td>
                            Row 3
                        </td>
                        <td >
                            Row 3
                        </td>
                        <td>
                            Row 3
                        </td>
                        <td>
                            Row 3
                        </td>
                    </tr>
                </table>
            </div>

Ответ:
Код
.CSSTableGenerator {
    margin:0px;padding:0px;
    width:100%;
    box-shadow: 10px 10px 5px #888888;
    border:1px solid #3f7f00;
    
    -moz-border-radius-bottomleft:0px;
    -webkit-border-bottom-left-radius:0px;
    border-bottom-left-radius:0px;
    
    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;
    
    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;
    
    -moz-border-radius-topleft:0px;
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
}.CSSTableGenerator table{
    border-collapse: collapse;
        border-spacing: 0;
    width:100%;
    height:100%;
    margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
    -moz-border-radius-topleft:0px;
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
    -moz-border-radius-bottomleft:0px;
    -webkit-border-bottom-left-radius:0px;
    border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
    background-color:#ffffff;
        

}
.CSSTableGenerator td{
    vertical-align:middle;
    
    background-color:#d4ffaa;

    border:1px solid #3f7f00;
    border-width:0px 1px 1px 0px;
    text-align:center;
    padding:7px;
    font-size:10px;
    font-family:Arial;
    font-weight:normal;
    color:#000000;
}.CSSTableGenerator tr:last-child td{
    border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
    border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
    border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
        background:-o-linear-gradient(bottom, #5fbf00 5%, #3f7f00 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #3f7f00) );
    background:-moz-linear-gradient( center top, #5fbf00 5%, #3f7f00 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00", endColorstr="#3f7f00");    background: -o-linear-gradient(top,#5fbf00,3f7f00);

    background-color:#5fbf00;
    border:0px solid #3f7f00;
    text-align:center;
    border-width:0px 0px 1px 1px;
    font-size:14px;
    font-family:Arial;
    font-weight:bold;
    color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
    background:-o-linear-gradient(bottom, #5fbf00 5%, #3f7f00 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #3f7f00) );
    background:-moz-linear-gradient( center top, #5fbf00 5%, #3f7f00 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00", endColorstr="#3f7f00");    background: -o-linear-gradient(top,#5fbf00,3f7f00);

    background-color:#5fbf00;
}
.CSSTableGenerator tr:first-child td:first-child{
    border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
    border-width:0px 0px 1px 1px;
}

Вопрос: Подскажите по CMS joomla. Плагин Szaki Table

Установила плагин Szaki Table.
Положила на хост файл Price.csv

В материалах Joomla, в HTML редакторе, написала код:

<!-- .szakitable table.csv td:nth-child(2),  .szakitable table.csv th:nth-child(2){  display: none} -->
<p>{szakitable   
                 csv="http://magazin.lebedeva-l.ru/price/Price.csv"  
                 filter="table" zebra="#eee" csvseparator="\t"}</p>
<!-- .szakitable table.csv td:nth-child(2),  .szakitable table.csv th:nth-child(2){  display: none} --> 
<table class="wide" border="0">
   <thead> 
     <tr>
        <th> Артикул </th> 
        <th> Фото </th> 
        <th> Наименование товара </th> 
        <th> Розница </th> 
        <th> Опт </th>
     </tr>
   </thead>
</table>
<p>{/szakitable}</p>


Не работает.
Что делать ? надо, чтобы работало как в

Сама таблица отображается, отрисовалась шапка таблицы.
1) Не отображаются данные, которые находятся в файле Price.csv
2) Не работает сортировка по полям.
3) Фильтр тоже не работает.
Ответ: С шаблоном конфликт. Поменяла шаблон, все заработало. Тему можно закрывать.
Вопрос: Tree Table CSS

Здравствуйте! Сделал несложную древовидную таблицу, у которой сворачиваются/разворачиваются строки. За основу взял обычное дерево , только добавил ячейки в строки.
Почти правильно работающий вариант
Вопрос. Как сделать так, чтобы при раскрытии узла Проект 1, не уезжал влево блок с Задачами ?
+ На всякий случай код без сервиса jsfiddle
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
li, ul{
	list-style:none;
	margin:0; padding:0;
	overflow:hidden;
}
.tbl {
	display:table;
	border-left:1px solid gray;
	border-top:1px solid gray;
}
.tr {
	display:table-row;
}
.tr > div {
	display:table-cell;
	border:1px solid gray;
	border-left:0;
	border-top:0;
	padding:2px 5px;
}
.thead {
	display:table-header-group;
	background-color:#ccc;
}
.tbody {
	display:table-row-group;
}
input{
	display:none;
}
input + li div label {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
	no-repeat 0px 4px;
}
input:checked + li div label {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
	no-repeat 0px 4px;
}
label	{
	cursor:pointer;
	padding-left:16px;
}
input ~ .tbody {
	display:none;
}
input:checked ~ .tbody {
	display:table-row-group;
}
</style>
</head>
<body>
<ul class="tbl">
		<li class="tr + thead">
			<div>Фамилия</div> <div>Проект</div> <div>Задача</div> <div>План</div> <div>Факт</div>
		</li>
		<input type="checkbox" id="chk1">
		<li class="tr">
			<div><label for="chk1">Иванов</label> </div> <div>&#160;</div><div>&#160;</div><div>&#160;</div><div>&#160;</div>
		</li>
		<ul class="tbody">
			<input type="checkbox" id="chk2">
			<li class="tr">
				<div>&#160;</div> <div><label for="chk2">Проект 1</label></div> <div>&#160;</div> <div>&#160;</div> <div>&#160;</div>
			</li>
			<ul class="tbody">
				<li class="tr"> <div>&#160;</div> <div>&#160;</div> <div>Задача 1</div> <div>10</div> <div>11</div> </li>
				<li class="tr"> <div>&#160;</div> <div>&#160;</div> <div>Задача 2</div> <div>20</div> <div>21</div> </li>
			</ul>
		</ul>
</ul> <!-- class="tbl" -->
</body>
</html>


К сообщению приложен файл. Размер - 3Kb
Ответ:
+ На всякий случай код без сервиса jsfiddle.net
<html>
<head>
<title>Дерево (древовидная таблица) без JavaScript, только HTML и CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
.treetable {
	border-collapse:collapse;
}
.treetable th {
	background:#4682B4;
	color:#FFFFFF;
}
.treetable td, th {
	padding:3px;
	border:1px solid #D3D3D3;
	width:200px;
}
.treetable label a{
	cursor:pointer;
	color:#FFFFFF;
	font-weight:bold;
	padding-left:16px;
}
.treetable tr {
	display:none;
}
.treetable thead tr {
	display:table-row;
}
.treetable .lev1 {
	background:#6E9ECA;
	display:table-row;
}
.lev2 {
	background:#708090;
}
.lev3 {
	background:#8FA0B0;
}
input[type="checkbox"]{
	display:none;
}
input + a {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
	no-repeat 0px 5px;
}
input:checked + a{
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
	no-repeat 0px 5px;
}
td+td+td+td {text-align:right;}
</style>
</head>
<body onload="ResetAll();">
<button onclick="SwapAll(false);">Свернуть все</button></a>
<button onclick="SwapAll(true);">Развернуть все</button></a>
<br><br>
<table class="treetable">
<thead>
	<tr><th>ФИО</th> <th>Проект</th> <th>Задача</th> <th>План</th> <th>Факт</th> </tr>
</thead>
<tr class="lev1"> <td><label><input type="checkbox"><a onclick="sh(this)">Иванов</a></label></td> <td></td> <td></td> <td></td> <td></td> </tr>
<tr class="lev2"> <td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Проект 1</a></label></td> <td></td> <td></td> <td></td> </tr>
<tr class="lev3"> <td></td> <td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Задача 1_1</a></label></td>	<td></td> <td></td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>10</td> <td>20</td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>20</td> <td>40</td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>30</td> <td>60</td> </tr>
<tr class="lev3"> <td></td><td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Задача 1_2</a></label></td> <td></td><td></td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>90</td> <td>99</td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>80</td> <td>88</td> </tr>
<tr class="lev2"> <td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Проект 2</a></label></td> <td></td><td></td><td></td> </tr>
<tr class="lev3"> <td></td> <td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Задача 2_1</a></label></td> <td></td> <td></td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>12</td> <td>12</td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>15</td> <td>15</td> </tr>
<tr class="lev3"> <td></td> <td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Задача 2_2</a></label></td> <td></td> <td></td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>22</td> <td>22</td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>25</td> <td>25</td> </tr>
<tr class="lev2">	<td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Проект 3</a></label></td> <td></td> <td></td> <td></td> </tr>
<tr class="lev3"> <td></td> <td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Задача 3_1</a></label></td> <td></td> <td></td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>30</td> <td>31</td> </tr>

<tr class="lev1"> <td><label><input type="checkbox"><a onclick="sh(this)">Петров</a></label></td> <td></td> <td></td> <td></td> <td></td> </tr>
<tr class="lev2"> <td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Проект А</a></label></td> <td></td> <td></td> <td></td> </tr>
<tr class="lev3">	<td></td> <td></td>	<td><label><input type="checkbox"><a onclick="sh(this)">Задача А</a></label></td> <td></td> <td></td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>100</td><td>200</td> </tr>

<tr class="lev1">	<td><label><input type="checkbox"><a onclick="sh(this)">Сидоров</a></label></td> <td></td> <td></td> <td></td> <td></td> </tr>
<tr class="lev2">	<td></td>	<td><label><input type="checkbox"><a onclick="sh(this)">Проект Б</a></label></td> <td></td> <td></td> <td></td> </tr>
<tr class="lev3">	<td></td> <td></td>	<td><label><input type="checkbox"><a onclick="sh(this)">Задача Б</a></label></td> <td></td> <td></td> </tr>
<tr class="lev4">	<td></td> <td></td> <td></td> <td>123</td><td>456</td> </tr>
</table>

<script>
function ResetAll() {
	var cs = document.getElementsByTagName('input');
	for (i=0; i < cs.length; i++) {
		if (cs[i].type == 'checkbox') {
			cs[i].checked = false;
		}
	}
}

function ShowLevel(row,lv) {
	var tBody = row.parentNode;
	var i = row.rowIndex;
	row = tBody.rows[i]; // Попытка перейти к следующей строке
	while (row && row.className.substring(3)*1 > lv) {
		if (row.className.substring(3)*1 == lv+1) {
			row.style.display = 'table-row';
			if ((row.querySelector('td input')) && row.querySelector('td input').checked) {
				ShowLevel(row,lv+1);
			}
		}
		i+=1;
		row = tBody.rows[i];
	}
}

function HideLevel(row,lv) {
	var i = row.rowIndex;
	var tBody = row.parentNode;
	row = tBody.rows[i]; // Попытка перейти к следующей строке
	while (row && row.className.substring(3)*1 > lv) {
		row.style.display = 'none';
		i+=1;
		row = tBody.rows[i];
	}
}

function sh(el) {
	var row = el.parentNode.parentNode.parentNode;
	var lv = row.className.substring(3)*1; // Уровень строки, циферка после 'lev'
	if (row.querySelector('td input').checked) {
		HideLevel(row,lv);
	} else {
		ShowLevel(row,lv);
	}
}

function SwapAll(b) {
	var tbl = document.getElementsByClassName('treetable')[0];
	for (i=1; i < tbl.rows.length; i++) {
		if (tbl.rows[i].className != 'lev1') {
			if (b) {tbl.rows[i].style.display = 'table-row';}
			else {tbl.rows[i].style.display = 'none';}
		}

		if (tbl.rows[i].querySelector('td input')) {tbl.rows[i].querySelector('td input').checked = b;}
	}
}
</script>
</body>
</html>
Вопрос: Не меняется border у table

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

<html>
	<head></head>
	<script type="text/javascript">
		function main()
		{
			var table = document.querySelectorAll('table')

			var i = -1, l = table.length

			while(++i < l)
			{
				table[i].style.border = 1
				alert(i + ' из ' + l + '\n' + table[i].innerHTML)
				table[i].style.border = 0
			}
		}
		document.addEventListener('DOMContentLoaded', main)
	</script>
	<body>
		<table border=0 cellspacing=0 cellpadding=0>
			<tr>
				<td>dsfsdf</td>
				<td>dsfsdf</td>
				<td>dsfsdf</td>
				<td>
					<table border=0 cellspacing=0 cellpadding=0>
					<tr>
						<td>dsfsdf</td>
						<td>dsfsdf</td>
						<td>dsfsdf</td>
						<td>dsfsdf</td>
					</tr>
				</table>
				</td>
			</tr>
		</table>
	</body>
</html>
Ответ: Спасибо ))

Рамка появляется, но только после того, как все алерты закроются(если закоментировать сброс на то, что было).
А вот так вообще не появляется...

function main()
{
	var table = document.querySelectorAll('table')

	var i = -1, l = table.length, b, p, m

	while(++i < l)
	{
		b = table[i].style.border
		p = table[i].style.padding
		m = table[i].style.margin

		table[i].style.border = "1px solid #FF0000"
		table[i].style.padding = "5px"
		table[i].style.margin = "5px"

		alert(i + ' из ' + l + '\n' + table[i].innerHTML)
		
		table[i].style.border = b
		table[i].style.padding = p
		table[i].style.margin = m
	}
}


Так-то я нашел, просто показал все рамки и подсказки с номером...
table[i].title = i


Просто, чтобы знать.
Вопрос: Компоновка страниц без table

Всю жизнь делал компоновку страниц с помощью table. Тут обкритиковали всего, обозвали как могли и сказали, что это давно не модно ))) Смирился. Пробую на div и сразу затык.

Цель - заполучить страничку с зафиксированным контентом по середине (как верхняя на картинке).

Раньше я это делал по колхозному (с использованием table) и всё нормально работало

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body style="background-color: #000000; padding: 0px; margin: 0px;">
        <div id="headerBlock" style="background-color: #00ffcc; text-align: center;">
            <div id="headerContent" style="height: 100px; width: 1020px; margin: 0 auto; text-align: left; background-color: #ccffcc;">
                Шапочка
            </div>
        </div>
        <div id="mainBlock" style="background-color: #ffffff; text-align: center;">
            <div id="contentBlock" style="width: 1020px; margin: 0 auto; text-align: left; background-color: #f7f7f7;">
                <table style="width: 100%; min-height: 500px;">
                    <tr>
                        <td id="leftContentBlock" style="background-color: #77b9ff;">
                            Содержание
                        </td>
                        <td id="rightContentBlock" style="width: 250px; background-color: #fff099;">
                            Элементы управления
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="footer" style="text-align: center; background-color: #686868;">
            <div id="footerContent" style="height: 100px; width: 1020px; margin: 0 auto; text-align: left; background-color: #898989;">
                Подвальчик
            </div>
        </div>
    </body>
</html>


Теперь пытаюсь на дивах

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body style="background-color: #000000; padding: 0px; margin: 0px;">
        <div id="headerBlock" style="background-color: #00ffcc; text-align: center;">
            <div id="headerContent" style="height: 100px; width: 1020px; margin: 0 auto; text-align: left; background-color: #ccffcc;">
                Шапочка
            </div>
        </div>
        <div id="mainBlock" style="background-color: #ffffff; text-align: center;">
            <div id="contentBlock" style="width: 1020px; margin: 0 auto; text-align: left; background-color: #f7f7f7;">
                <div id="leftContentBlock" style="float: left; width: 770px; background-color: #77b9ff; min-height: 500px;">
                    Содержание
                </div>
                <div id="rightContentBlock" style="float: right; width: 250px; background-color: #fff099; min-height: 500px;">
                    Элем енты управления
                </div>
            </div>
        </div>
        <div id="footer" style="text-align: center; background-color: #686868;">
            <div id="footerContent" style="height: 100px; width: 1020px; margin: 0 auto; text-align: left; background-color: #898989;">
                Подвальчик
            </div>
        </div>
    </body>
</html>


Т.е. на div блоки mainBlock и contentBlock больше не растягиваются по вертикали.
Как это правильно делается ?


Пишу как умею. Дорого, долго...

К сообщению приложен файл. Размер - 29Kb
Ответ:
krvsa
hVostt, да ты нам просто глаза раскрыл!


das is fantastish ))
Вопрос: А есть ли разница между table/tr/td и стилями с display:table* ?

Потребовалось мне недавно заняться сайтостроительством и пришлось почитать много разных форумов, справочников и примеров.
И оказалось, что редко когда обходятся православным float и position. Довольно часто для решения задач оптимальным является задать display:table-cell (например чтобы прижать подвал произвольной высоты к низу страницы).
И возник вопрос, а нужно ли вообще избегать тэга TABLE для разметки, если при блочной верстке приходится задействовать display:table? Или разница все же есть?
________________________
Мы смотрим с оптимизмом...
...в оптический прицел.
Ответ:
Alibek B.
А поведение в браузере в обоих случаях одинаково.
Так?
нет.
например, сверхдлинный или сверхвысокий текст растянет колонку и/или строку у table, а на дивах лишь этот див. или вообще всю строку расколбасит. с другой стороны, в дивах без базара работает overflow:hidden, что соорудить в td - тот еще геморой.
Вопрос: find table или другой способ забрать переменные из таблицы

Доброй ночи!

Есть строковая переменная содержащийся
var  table =" <table><tr><td><td></td></td><td></td><td>ФИО</td>Иван Иванович<td></td><td></td></tr><table>";


Подскажите как за получить значения следующего td после td содержащего текст ФИО.

Спасибо!
Ответ: arahmanov,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
   $(function(){
var client = $('#pnlClientDetails td:contains("Ф.И.О")+').text();
alert(client);
   })
  </script>
</head>

<body>
    <table id="pnlClientDetails"><tr>
<td class="CDataHeader" style="width:100px;">Ф.И.О</td>
<td class="CDataContent" style="white-space: nowrap;">Иван Иванович</td>
</tr></table>
</body>

</html>
Вопрос: html table с возможностью добавления новой строки

Здравствуйте.

Хочу поместить на форму объект типа таблицу с возможностью добавлять новые строки и удалять добавленные.

Подскажите каким образом это лучше сделать.

p.s.
На текущий момент удалось найти следующую библиотеку

она использует
//code.jquery.com/jquery-1.12.3.js



все бы ничего, НО при нажатии кнопки новая строка появляется, НО после сразу же пропадает

        <script type="text/javascript">
                $(document).ready(function() {
                    var t = $('#example').DataTable();
                    var counter = 1;

                    $('#addRow').on( 'click', function () {
                        t.row.add( [
                            counter +'.1',
                            counter +'.2',
                            counter +'.3',
                            counter +'.4',
                            counter +'.5',
                            counter +'.6'
                        ] ).draw(false);

                        counter++;
                    } );

                    // Automatically add a first row of data
                    //$('#addRow').click();
                } );
        </script>



        <button id="addRow" class="btn btn-success" type="submit"><i class="glyphicon glyphicon-ok-sign" ></i> Добавить строку</button>


        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
                <th>Column 6</th>
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
                <th>Column 6</th>
            </tr>
            </tfoot>
        </table>


Подскажите в чем может быть проблема.
Ответ: drno,

а чем не подошли родные методы ?

+ Пример на добавление строк сверху/снизу, и столбов слева/справа в любых комбинациях между собой
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Добавить строки, столбцы</title>
<style>
table {
  font:15px arial,sans-serif;
  border-collapse:collapse;
  margin-bottom:10px;
}
td {border:1px solid #aaa; padding:4px;}
button {margin:2px;}
</style>
</head>
<body>
<table id="myTable">
  <tr> <td>cell 1_1</td> <td>cell 1_2</td> </tr>
  <tr> <td>cell 2_1</td> <td>cell 2_2</td> </tr>
  <tr> <td>cell 3_1</td> <td>cell 2_3</td> </tr>
  <tr> <td>cell 4_1</td> <td>cell 2_4</td> </tr>
</table>
<button type="button" onclick="addRowTop()">Вставить строку на самый верх таблицы</button>
<button type="button" onclick="addRowBottom()">Вставить строку в самый низ таблицы</button>
<br>
<button type="button" onclick="addColumnLeft()">Добавить колонку в левую часть таблицы</button>
<button type="button" onclick="addColumnRight()">Добавить колонку в правую часть таблицы</button>

<script>
var el = document.getElementById('myTable');

function addRowTop() {
  var cols_cnt = el.rows[0].cells.length;
  var row = el.insertRow(0);

  for (var i=0; i < cols_cnt; i++) {
    var NewCell = row.insertCell(-1);
    NewCell.innerHTML = 'Text on top ' + (i+1).toString();
  }
}

function addRowBottom() {
  var cols_cnt = el.rows[el.rows.length-1].cells.length;
  var row = el.insertRow(-1);

  for (var i=0; i < cols_cnt; i++) {
    var NewCell = row.insertCell(-1);
    NewCell.innerHTML = 'Text on bottom ' + (i+1).toString();
  }
}

function addColumnLeft() {
  var rows_cnt = el.rows.length;
  var cols_cnt = el.rows[0].cells.length;
  var cell;

  for (var i=0; i < rows_cnt; i++) {
    cell = el.rows[i].insertCell(0);
    cell.innerHTML = Math.floor(Math.random()*10000);
  }
}

function addColumnRight() {
  var rows_cnt = el.rows.length;
  var cols_cnt = el.rows[0].cells.length;
  var cell;

  for (var i=0; i < rows_cnt; i++) {
    cell = el.rows[i].insertCell(-1);
    cell.innerHTML = Math.floor(Math.random()*10000);
  }
}
</script>
</body>
</html>
Вопрос: table cellpadding, но только по горизонтали

Приветствую!
<table cellpadding="10">
  <tr>
    <th>Названия</th>
    <th>значения</th>
  </tr>
...
</table>

Возможно ли указать cellpadding только по горизонтали?
По вертикали у меня фиксированная высота ячеек.

Задача:
Названия значения
Имя: Петя
Профессиональное назначение: Кенгуру
Возраст:18
IQ:15

Сделать так, чтобы в первом столбце ширина колонки была на 20 пикселей шире самой широкой ячейки (т.е. со значением "Профессиональное назначение")
Ответ:
Charles Weyland
куда зафигачить padding-right: 20px;? Это, скорее всего, и есть нужное решение

Ты бы пример тестовый нормальный сделал... Так и писать много не пришлось бы... ;)
Все показали бы на том примере.
Вопрос: Получить координаты ячейки из <table>

Имеется таблица на чистом php
Хочу получить координаты ячейки по нажатию на нее в окне браузера.
Получается решить этот вопрос только двумя функциями, каждая из которых отдельно получает координаты строки и столбца.
Необходимо реализовать получение координат с помощью одной функции.
Когда пытаюсь объединить функции в одну, не получаю значение второй координаты
Я только начинаю делать первые шаги, но есть догадки, что при onclick функция не получает второй параметр
Пример кода:
<table border="1">
  <tr onclick="myPositionY(this)">
    <td width="20" height="20" onclick="myPositionX(this)"></td>
    <td width="20" height="20" onclick="myPositionX(this)"></td>
  </tr>

function myPositionX(x) {
	alert("Координаты X: " + x.cellIndex);
}
function myPositionY(y) {
	alert("Координаты Y: " + y.rowIndex);
}


Помогите доступным языком разобраться чайнику
Ответ:
Сообщение от Alexandroppolus
а сам forEach давно есть в прототипе NodeList
Вы конечно можете расширять прототипы как угодно, но сам интерфейс не содержит такого определения (содержит только итератор, что достаточно для перечисления, добавление же методов от массива несколько излишне, поскольку некоторые методы не могут быть применены надлежащим образом. Например, метод sort от массива на самом деле не смог бы отсортировать ноды в представлении на экране, нужен именно особенный метод, который бы произвёл подобную сортировку. В большинстве случаев вам не нужна такая привязка, так что подойдёт любой способ перевода в массив (Array.from, или простое перечисление цикл for-of, for с переменной).)