Nano Hash - криптовалюты, майнинг, программирование

Столбцы таблицы, установка минимальной и максимальной ширины с помощью css

Я хотел бы иметь таблицу, которая в столбцах может растягиваться, но у меня небольшие проблемы с минимальной и максимальной шириной в css.

Также кажется, что есть некоторые противоречивые ответы о том, как это работает:

Я хотел бы иметь следующее

table{
   width:100%;
}
.a, .b, .c
{
    background-color: red;
}
.a
{
    min-width: 10px;
    max-width: 20px;
}
.b
{
    min-width: 40px;
    max-width: 45px;
}
.c
{
}

<table>
    <tr>
        <td class="a">A</td>
        <td class="b">B</td>
        <td class="c">C</td>
    </tr>
</table>

Есть ли способ добиться этого без javascript (т. е. ограниченного растяжения столбцов с таблицей)?

  • Мне это нужно только для работы с CSS3 + HTML5
  • jsfiddle с не расширяющимся материалом: http://jsfiddle.net/4b3RZ/10/
  • если я установлю только минимальную ширину для столбцов, я получу пропорциональное растяжение: http://jsfiddle.net/4b3RZ/ 8/

ниже приведена таблица того, что на самом деле отображается для некоторых различных настроек css:

введите здесь описание изображения

html css html-table
21.08.2013

  • Что ж, в вашем CSS есть синтаксическая ошибка: min-width без :. Исправьте это и добавьте начальную width к .a и .b, и, похоже, это работает в моем Chrome 29. 22.08.2013
  • Изменить: min-width работает в Chrome 29, а max-width нет: jsfiddle.net/4b3RZ/9 22.08.2013
  • @Passerby, да, вы абсолютно правы насчет: (должно быть, это опечатка). Я исправил это в вопросе. Любая идея, как заставить работать максимальную ширину? 22.08.2013

Ответы:


1

Таблицы работают по-разному; иногда вопреки здравому смыслу.

Решение состоит в том, чтобы использовать width в ячейках таблицы вместо max-width.

Хотя может показаться, что в этом случае ячейки не будут уменьшаться ниже заданной ширины, на самом деле они будут уменьшаться.
без ограничений на c, если вы зададите таблице ширину 70 пикселей, ширины a, b и c получится 16, 42 и 12 пикселей соответственно.
При ширине таблицы 400 пикселей они ведут себя так, как вы говорите, что ожидаете в приведенной выше сетке.
Только когда вы пытаетесь сделать таблицу слишком маленькой размер (меньше, чем a.min+b.min+содержимое C) не удастся: тогда сама таблица будет шире, чем указано.

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

table {
  width: 70px;
}

table, tbody, tr, td {
  margin: 0;
  padding: 0;
  border: 0;
  border-spacing: 0;
}

.a, .c {
  background-color: red;
}

.b {
  background-color: #F77;
}

.a {
  min-width: 10px;
  width: 20px;
  max-width: 20px;
}

.b {
  min-width: 40px;
  width: 45px;
  max-width: 45px;
}

.c {}
<table>
  <tr>
    <td class="a">A</td>
    <td class="b">B</td>
    <td class="c">C</td>
  </tr>
</table>

22.08.2013
  • Красиво, работает отлично! Ячейкам нет смысла уменьшаться ниже указанного width, но они это делают! Спасибо. 28.01.2014
  • Обратите внимание, что приведенное выше не будет работать для таблицы с фиксированным макетом. 23.06.2016
  • Я не получаю ответа. Почему А больше, чем С? Разве оба не должны быть размером 14 пикселей? Если A составляет 16 пикселей, это означает, что он взял 2 пикселя из C, пытаясь заполнить 20 пикселей, необходимых по ширине. Это не так, как max-width работает. Я понял вопрос (и свою проблему) так: не позволяйте ячейке расти за пределы Npx, по крайней мере, для максимальной ширины. 27.05.2020
  • Таблицы @estani работают иначе, чем другие элементы. В этом случае A и B должны получить 20 и 45 пикселей соответственно, но тогда C получит только 5 пикселей (осталось от вычитания A и B из 70 пикселей). Поскольку текст шире 5 пикселей, C увеличивается, чтобы текст поместился, а A и B уменьшаются, чтобы вся таблица оставалась на уровне 70 пикселей. Нет правила, согласно которому A и C должны иметь одинаковую ширину. 28.05.2020
  • Ваша проблема, кажется, в другом: похоже, что ваша таблица шире, чем заданная ширина, может ли это быть правдой? В этом случае каждому столбцу изначально будет назначена его ширина, а затем ширина всех столбцов будет увеличена, чтобы они соответствовали таблице. Итак, в вашем случае ширина рассматривается как минимальная ширина. Это отвечает на ваш вопрос? 28.05.2020
  • действительно, как здесь (70px шире, чем 45px + 20px). Я получаю для a, b, c 16, 43, 11. Данные ширины, кажется, используются как своего рода вес. из 70 пикселей c занимает минимум 11, поэтому a + b получают 59, которые должны быть каким-то образом распределены, и ширина, похоже, каким-то образом влияет на это распределение. На мой взгляд, ничего из этого не относится к концепции максимальной ширины ограничения роста. 28.05.2020
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..