Подскажи-те пожалуйста, возможно ли сверстать таблицу, чтобы у пользователя была возможность самому изменять ширину колонок?
-
Конечно, можно! Только сейчас то, кто меняет эту ширину? Обама?– UModeLCommented 26 мая 2020 в 0:51
-
Без javascript ?– Andrew HobbitCommented 26 мая 2020 в 3:55
-
@AndrewHobbit: что Вас смущает? Просто неизвестно какие цели у ТС. Но одним HTML точно не обойтись :)– UModeLCommented 26 мая 2020 в 4:10
Добавить комментарий
|
1 ответ
В виду отсутствия дополнительной информации и каких-либо условий со стороны автора вопроса, предложу простой вариант на CSS с использованием вложенных параграфов со свойством resize
:
table {
box-shadow: 1px 1px 0 0px red;
border-collapse: collapse;
text-align: center;
}
td { box-shadow: inset 1px 1px 0 0px red; }
td p {
margin: 0;
height: 1em;
padding: 0.5em;
min-width: 1.5em;
}
tr:first-of-type td p {
resize: horizontal;
overflow: hidden;
}
<table>
<tr><td><p>1</p></td><td><p>2</p></td><td><p>3</p></td><td><p>4</p></td></tr>
<tr><td><p>5</p></td><td><p>6</p></td><td><p>7</p></td><td><p>8</p></td></tr>
<tr><td><p>9</p></td><td><p>10</p></td><td><p>11</p></td><td><p>12</p></td></tr>
</table>
В Chrome можно задавать resize
непосредственно ячейкам таблицы, но к сожалению другие браузеры категорически против:
table {
box-shadow: 1px 1px 0 0px red;
border-collapse: collapse;
text-align: center;
}
td {
margin: 0;
height: 1em;
padding: 0.5em;
min-width: 1.5em;
box-shadow: inset 1px 1px 0 0px red;
}
tr:first-of-type td {
resize: horizontal;
overflow: hidden;
}
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>
Также в Chrome, если задавать resize
для ячеек, можно задать изменение не только ширины или высоты, но и в обоих направлениях одновременно (правда, логика работы становится не совсем понятна, а поведение оставляет желать лучшего):
table {
box-shadow: 1px 1px 0 0px red;
border-collapse: collapse;
text-align: center;
}
td {
margin: 0;
height: 1em;
padding: 0.5em;
min-width: 1.5em;
box-shadow: inset 1px 1px 0 0px red;
resize: both;
overflow: hidden;
}
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>