Как сделать свойство ширины CSS равным результату математического выражения

Я пытаюсь сделать свойство ширины равным (100/3)%, потому что я пытаюсь равномерно разделить ширину на 3 столбца. Но, очевидно, это недопустимый css. Каков правильный способ сделать это?

Пожалуйста, не загружайте изображения кода, когда задаете вопрос. Вместо этого скопируйте и вставьте код в виде текста.

— 11.12.2020 11:01

Ах, я не знал. Буду делать это в дальнейшем :)

— 13.12.2020 04:17

javascript css width

11.12.2020 04:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

чистый метод CSS:

th, td {
  width: calc(100% / 7);
}

Метод Javascript: вы можете получить элементы таблицы и назначить стили, попробуйте следующее:

let th = document.getElementsByTagName('th');
let td = document.getElementsByTagName('td');

console.info(th, td)

for(let el of th){
    el.style.width = (100 / 3) + 'px';
}

for(let el of td){
    el.style.width = (100 / 3) + 'px';
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Я знаю, что вы можете сделать это так, но есть ли способ сделать это прямо в таблице стилей без использования javascript?

— 11.12.2020 04:52

Может быть, это ?? css-tricks.com/keep-math-in-the-css

— 11.12.2020 04:57

Спасибо! Это больше похоже на то, что я пытался сделать. Спасибо вам обоим!

— 11.12.2020 05:08

большой! ответ обновлен...

— 11.12.2020 05:11

11.12.2020 04:44

calc это путь.

Просто не забудьте оставить пробел между операторами и операндами.

// This is correct
.class {
  width: calc(100% - 5px);
}

// This produces an error
.class {
  width: calc(100%-5px);
}

11.12.2020 05:23

Другие вопросы по теме

Как изменить цвет ручки в Bootstrap 5 Switch

Я хочу создать кнопку, которая будет загружать музыкальный файл с компьютера пользователя в div, используя только HTML, css и JavaScript. Это возможно?

Как воспроизвести последовательность анимации jquery в vanilla js/css

Как выровнять текст span и элемент ввода по горизонтали

Скрыть iframe, но показать поле запроса на tumblr

Как изменить радиус границы тега реакции-выбора

Как применить стиль CSS для выбора поля после выбора опции?

Получить случайный элемент из некоторых объектов в Array Javascript

Наведите курсор на элемент option?

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

Как сделать свойство ширины CSS равным результату математического выражения

Ответы 2

Другие вопросы по теме

Похожие вопросы