как задать рамку ячеек заголовка таблицы после ее создания
Здравствуйте, слишком долго ищу ответ на такой простой вопрос.
Создаю таблицу при помощи JS, хочу назначить стили не во время создания таблицы (с этим проблем нет td.style.border = '1px solid black' ), а хочу сделать это после. Итак, вопрос, как назначить всем ячейкам td заголовка th таблицы tbl style.border = '1px solid black' без банального перебора в цикле всех td принадлежащих th. Может есть пример с nth()? |
Цитата:
|
Я хочу хотя бы добиться рамки вокруг header так
th.style.border = '1px solid black' но результат нулевой, tbl.style.border = '2px solid black' работает |
А почему не?
table {
border-collapse: collapse;
}
th {
border: 1px solid #000;
/* прочие стили */
}
|
Я пишу функцию, которая создаст таблицу программно. И вся стилистика будет заложена внутри функции.
|
Конечно я могу создать стиль программно, применить его к таблице, а потом даже удалить, но мне казалось, что можно обойтись без этого.
|
<table style="border-collapse: separate;">
<tr>
<th style="border: 1px solid #f00;">11111</th>
</tr>
<tr>
<td style="border: 1px solid #00f;">22222</td>
</tr>
</table>
А если сказанное выше надо понимать как <tr тут прописать стили для ее ячеек>, то конечно нельзя. PS. То есть, вы можете указать общий стиль для ячеек строки, но без явного указания стиля ячейки "наследовать от родителя" не получится.
<table style="border-collapse: separate;">
<tr style="border: 1px solid #f00;">
<th>без бордюра</th>
<th style="border: inherit;">с бордюром</th>
</tr>
</table>
Если я правильно понял смысл вопроса. |
Вы предлагаете HTML вариант, а я пишу JS код!
function fromArrayOfObj(obj) {
let tr, td, NR = obj.length, body = document.body
//table
let tbl = document.createElement('table')
tbl.id = 'table';
//caption
let tcap = tbl.createCaption();
tcap.innerHTML = "Сотрудники";
//header
let th = tbl.createTHead();
th.style.border = '1px solid black';
tr = th.insertRow();
for (var key in obj[0]) {
td = tr.insertCell();
// td.style.border = '1px solid black';
// td.style.fontWeight = 'bold';
// td.style["text-align"] = 'center';
td.appendChild(document.createTextNode(key));
}
//fill table
for (var i = 0; i < NR; i++) {
tr = tbl.insertRow();
for (var key in obj[0]) {
td = tr.insertCell();
td.appendChild(document.createTextNode(obj[i][key]));
td.style.border = '1px solid black';
}
}
//apply styles
// tbl.style.border = '2px solid black';
// tbl.style.borderCollapse = 'collapse';
body.appendChild(tbl);
}
|
... хотел бы я увидеть border у head, возможно это нереально, пока знаю одно решение: красить по контуру бока ячеек внутри head.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег THEAD</title>
<style type="text/css">
td{
height: 50px;
}
</style>
</head>
<body>
<table style="width: 600px; border-collapse: collapse">
<thead style="background: #fc0; box-sizing: border-box">
<tr>
<td style="border: 1px solid #000000; border-right: none"> ... </td>
<td style="border: 1px solid #000000; border-right: none; border-left: none;"> ... </td>
<td style="border: 1px solid #000000; border-left: none;"> ... </td>
</tr>
</thead>
<tbody style="background: #ccc">
<tr>
<td> ... </td>
<td> ... </td>
<td> ... </td>
</tr>
</tbody>
</table>
</body>
</html>
|
Цитата:
|
| Часовой пояс GMT +3, время: 10:18. |