Какой-либо способ синхронизировать ширины столбца таблицы с HTML + CSS?
Вы можете сделать что-то вроде следующего:
git log --pretty=format: --name-only | sort | uniq -c | sort -rg | head -10
Журнал просто выводит имена файлов, которые были изменены в каждой фиксации, в то время как остальная часть просто сортирует и выводит верхние 10 наиболее часто встречающиеся имена файлов.
5 ответов
Только возможно, если Вы можете устранять-ширина столбцы. Если можно установить фиксированную ширину тогда, некоторый css как это должен работать:
td {
width: 25%;
}
можно настроить каждую ширину столбцов как это:
<table>
<tr>
<td class="col1">...</td>
<td class="col2">...</td>
</tr>
</table>
...
<table>
<tr>
<td class="col1">...</td>
<td class="col2">...</td>
</tr>
</table>
и затем определяют ширины как это:
.col1 {
width: 25%;
}
.col2 {
width: 75%;
}
Если Вы не слишком придирчивы, о которой ширине столбцов браузер придумывает, пока они - то же через различные таблицы, можно использовать свойство CSS table-layout (поддерживаемый всеми главными браузерами) в сочетании с таблицей width:
table {
table-layout: fixed;
width: 100%;
}
Это заставляет все столбцы (без указанной ширины) иметь ту же ширину, независимо от содержания таблицы.
Чтобы подробно остановиться на ответе Ken's, можно также определить точные ширины в пикселях:
td { width: 250px }
или Эмс (ширина буквы M):
td { width: 32em }
или исключая или pt или безотносительно (хорошо... на самом деле %, pt, пкс, они, исключая могли бы быть им). Если Вам нужны Ваши столбцы, чтобы быть различными ширинами, то простой способ состоит в том, чтобы дать классы ячеек таблицы:
<table><tr>
<td class="col1">...</td><td class="col2">...</td>...
</tr></table>
и присваивают ширину столбцов классам:
td.col1 { width: 48em }
td.col2 { width: 200px }
...
должно быть достаточно присвоить ширину столбцов первой строке в каждой таблице. [редактирование: похож я был выкопан на том, что, в то время как я писал]
, Вы могли, вероятно, также сойти с ума с одноуровневым селектором CSS 2 и записать что-то как [1 111]
tr > td:first-child { width:48em } /* first column */
tr > td:first-child + td { width: 200px } /* second column */
tr > td:first-child + td + td { width: 5% } /* third column */
...
, но если у Вас есть больше, чем несколько столбцов, которые могли бы стать ужасными. И если Вы используете своего рода шаблонную систему или сценарий для генерации этих таблиц, я уверен, что будет более легко/более ясно просто поместить класс = "col#" атрибут на каждой ячейке в шаблоне однажды.
Вот маленький JavaScript, который я сделал для изменения размеров ячеек, чтобы заставить их равняться ширине во всех таблицах на странице.
function resizeTables()
{
var tableArr = document.getElementsByTagName('table');
var cellWidths = new Array();
// get widest
for(i = 0; i < tableArr.length; i++)
{
for(j = 0; j < tableArr[i].rows[0].cells.length; j++)
{
var cell = tableArr[i].rows[0].cells[j];
if(!cellWidths[j] || cellWidths[j] < cell.clientWidth)
cellWidths[j] = cell.clientWidth;
}
}
// set all columns to the widest width found
for(i = 0; i < tableArr.length; i++)
{
for(j = 0; j < tableArr[i].rows[0].cells.length; j++)
{
tableArr[i].rows[0].cells[j].style.width = cellWidths[j]+'px';
}
}
}
window.onload = resizeTables;
Я почти потрясен, что никто не предложил группы столбцов ! С ним можно дать столбцу определенный класс, ширину и другие полезные свойства. И так как это - HTML 4.01, это поддерживается всеми браузерами, которые поддерживают doctype.