Max функция CSS с процентным аргументом не работает с элементом th

Я хочу, чтобы ширина столбцов таблицы соответствовала ширине таблицы, сохраняя при этом минимальную ширину. Для этого я применил элемент min-width: max(500px, 33.3%) к элементу th, но весь столбец, похоже, не имеет ширины ни 500 пикселей, ни 33,3%. Где я делаю неправильно?

<table>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
      <th>address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>foo</td>
      <td>20</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>bar</td>
      <td>28</td>
      <td>foobar</td>
    </tr>
  </tbody>
</table>

table {
  table-layout: fixed;
  min-width: 100%;
  overflow-x: scroll;
}

th {
  min-width: max(500px, 33.3%);
  background-color: blue;
}

https://codepen.io/hitochan777/pen/wvzgELE

html css

14.12.2020 04:10

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

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

306

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

Ответы 3

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

Я думаю, что самый простой способ - разделить два значения с помощью

min-width: max(500px); width: 33.3%;

max(500px) здесь ничего не делает, так как max берет максимум из списка аргументов. Максимум из списка с одним элементом 500 пикселей, очевидно, составляет 500 пикселей.

— 10.05.2023 13:55

14.12.2020 04:36

Просто просто сделайте ширину на 33,3%. Он будет масштабироваться вместе с окном браузера.

    th {width: 33.3%;}

14.12.2020 05:30

table {
  table-layout: fixed;
  min-width: 100%;
  overflow-x: scroll;
}

th {
    text-align: center;
    background-color: blue;
    max-width: 33.3%;
}
@media screen and (max-width: 500px) {
  th {
    max-width: 500px;
  }
}

<!DOCTYPE html>
  <html>
    <head>
      <title>Title of the document</title>

    </head>

    <body>

   
<table>
  <thead>
    <tr>
      <th>&nbsp;name&nbsp;</th>
      <th>&nbsp;&nbsp;age&nbsp;&nbsp;</th>
      <th>address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>foo</td>
      <td>20</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>bar</td>
      <td>28</td>
      <td>foobar</td>
    </tr>
  </tbody>
</table>
    </body>
  </html>

попробуй это!

14.12.2020 05:33