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

Question

Wyatt

html , php , css

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

С наступившим всех! :-) Нужна помощь — не могу разобраться, как сделать таблицу и её заголовок более аккуратными, так как все плывёт по ширине (как показано на скриншоте). Заголовок таблицы формируется в файле style_monitors.css следующим образом: <br/> <br/> body { <br/> width: 80%; <br/> margin: auto; <br/> } <br/> <br/> a:link { <br/> color: gray; <br/> } <br/> <br/> a:visited { <br/> color: white; <br/> } <br/> <br/> a:hover { <br/> color: rebeccapurple; <br/> } <br/> <br/> a:active { <br/> color: teal; <br/> } <br/> <br/> #navigation { <br/> <br/> } <br/> <br/> p { <br/> font-size: 120%; <br/> color: dimgray; <br/> } <br/> <br/> #contents { <br/> float: right; <br/> } <br/> <br/> ul { <br/> list-style-type: none; <br/> margin: 0; <br/> padding: 0; <br/> overflow: hidden; <br/> background-color: #2f4f4f; <br/> font-family: sans-serif; <br/> } <br/> <br/> li { <br/> float: left; <br/> } <br/> <br/> li a { <br/> display: block; <br/> color: white; <br/> text-align: center; <br/> padding: 14px 16px; <br/> text-decoration: none; <br/> } <br/> <br/> /* Изменить цвет ссылки на белый при наведении */ <br/> li a:hover { <br/> background-color: #fff; <br/> } <br/> А сама таблица расположена в файле (monitots.php): <br/> <br/> .styled-table { <br/> border-collapse: collapse; <br/> margin: 5px 0; <br/> font-size: 0.9em; <br/> font-family: sans-serif; <br/> min-width: 400px; <br/> box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); <br/> } <br/> .styled-table thead tr { <br/> background-color: #ffd700; <br/> color: #000000; <br/> text-align: left; <br/> } <br/> .styled-table th, <br/> .styled-table td { <br/> padding: 12px 15px; <br/> } <br/> .styled-table tbody tr { <br/> border-bottom: 1px solid #dddddd; <br/> } <br/> .styled-table tbody tr:nth-of-type(even

1 января 2025 г. 17:14

Ответы на вопрос 1

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

Answer 1

Чтобы выровнять заголовок и содержимое таблицы по ширине, и сделать таблицу более аккуратной, вы можете внести следующие изменения в ваш CSS и HTML.

### 1. Обновление CSS
Добавьте следующие правила CSS, чтобы настроить стиль вашей таблицы:

```css
.styled-table {
    border-collapse: collapse;
    margin: 5px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    width: 100%; /* Задаем ширину таблицы 100% */
    min-width: 400px; /* Минимальная ширина таблицы */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-table thead tr {
    background-color: #ffd700;
    color: #000000;
    text-align: left;
}

.styled-table th, 
.styled-table td {
    padding: 12px 15px;
    text-align: left; /* Выравнивание содержимого по левому краю */
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3; /* Чередующиеся цвета для строк */
}
```

### 2. Обновление HTML
Если у вас еще нет, добавьте класс `styled-table` к вашей таблице. Пример HTML-кода таблицы может выглядеть так:

```html
<table class="styled-table">
    <thead>
        <tr>
            <th>Заголовок 1</th>
            <th>Заголовок 2</th>
            <th>Заголовок 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Данные 1</td>
            <td>Данные 2</td>
            <td>Данные 3</td>
        </tr>
        <tr>
            <td>Данные 4</td>
            <td>Данные 5</td>
            <td>Данные 6</td>
        </tr>
        <!-- Добавьте больше строк, если необходимо -->
    </tbody>
</table>
```

### 3. Проверка на предмет других стилей
Убедитесь, что нет дополнительных стилей, которые могут конфликтовать с вашими. Например, если используется какие-то глобальные стили для `th` или `td`, они могут переопределять ваши настройки.

### 4. Дальнейшая настройка
Если вам нужно будет выровнять заголовки таблицы по центру или правому краю, просто измените свойство `text-align` в соответствующем правиле. Например, чтобы выровнять текст в заголовках по центру:

```css
.styled-table th {
    text-align: center; /* Выравнивание заголовков по центру */
}
```

Эти изменения должны помочь сделать вашу таблицу более аккуратной и выровненной по ширине. Не забудьте протестировать изменения в различных браузерах, чтобы убедиться, что внешний вид остается consistent.