Вопрос или проблема
Я пытаюсь разместить нижнюю границу под каждым разделом данных, но между первым и вторым столбцом есть разрыв. Я не уверен, как убрать это пространство между столбцами. Я пробовал использовать тег hr, но понял, что использовать границы работает лучше, хотя я не могу найти способ убрать этот переверст.
Мне также нужно убрать последнюю строку, чтобы осталось только три линии, разделяющие каждый раздел данных. Я пробовал добавить класс и установить нижнюю границу на белый, прозрачный и 0, чтобы проверить, сработает ли это, но ничего не вышло.
Ниже представлен мой текущий код и фотография веб-сайта.
table {
width: 100%;
}
.amount {
font-weight: 700;
color: hsl(14, 45%, 36%);
}
td {
border-bottom: solid hsl(30, 18%, 87%) 1px;
}
<table class="nutrition-table">
<!-- -->
<tr>
<td class="table-row">Калории</td>
<td class="table-row amount">277kcal</td>
</tr>
<tr>
<td class="table-row">Углеводы</td>
<td class="table-row amount">0g</td>
</tr>
<tr>
<td class="table-row">Белок</td>
<td class="table-row amount">20g</td>
</tr>
<tr class="no-border">
<td class="table-row">Жир</td>
<td class="table-row amount">22g</td>
</tr>
</table>
Как видно, в каждой линии столбца есть разрыв, и есть линия после последнего раздела данных, которую нужно удалить.
Текущий результат кода
Используйте border-collapse: collapse; на вашей таблице, чтобы убрать разрыв между границами столбцов. Для последней строки добавьте класс и установите border-bottom: none;.
Вот обновленный CSS:
table {
width: 100%;
border-collapse: collapse;
}
td {
border-bottom: solid hsl(30, 18%, 87%) 1px;
}
.no-border td {
border-bottom: none;
}
HTML:
<tr class="no-border">
<td>Жир</td>
<td class="amount">22g</td>
</tr>
Это создаст непрерывные линии под каждым разделом и уберет последнюю границу.
Ответ или решение
Для удаления пробела между нижними границами столбцов таблицы и сокращения их количества, вы можете внести некоторые изменения в ваши стили CSS и слегка изменить структуру HTML.
Проблема с пробелом между границами:
Когда вы используете свойство border для ячеек таблицы <td>, пробел или разделение между границами столбцов могут возникать из-за стандартных стилей браузера и свойства border-collapse, которое по умолчанию не применяется к таблицам. Установив значение collapse, вы сможете добиться более «плотного» отображения границ без промежутков между ними.
Обновленный CSS:
Вот улучшенная версия вашего кода, которая позволит убрать пробелы и настроить вид таблицы так, как вам нужно:
table {
width: 100%;
border-collapse: collapse; /* Убирает пробелы между границами ячеек */
}
.amount {
font-weight: 700;
color: hsl(14, 45%, 36%);
}
td {
border-bottom: solid hsl(30, 18%, 87%) 1px; /* Нижняя граница ячейки */
}
.no-border td {
border-bottom: none; /* Убирает нижнюю границу для последней строки */
}Обновленный HTML:
Ваша структура HTML остается в основном прежней. Убедитесь, что у вас есть класс no-border на строке, для которой вы хотите убрать нижнюю границу.
<table class="nutrition-table">
<tr>
<td class="table-row">Calories</td>
<td class="table-row amount">277kcal</td>
</tr>
<tr>
<td class="table-row">Carbs</td>
<td class="table-row amount">0g</td>
</tr>
<tr>
<td class="table-row">Protein</td>
<td class="table-row amount">20g</td>
</tr>
<tr class="no-border">
<td class="table-row">Fat</td>
<td class="table-row amount">22g</td>
</tr>
</table>Объяснение:
- Пробелы между границами: Установка
border-collapse: collapse;на элементе<table>объединяет границы ячеек и удаляет промежутки, создавая единый вид для линий, проходящих между строками и столбцами. - Удаление последней нижней границы: Используя класс
no-border, вы можете легко убрать последнюю нижнюю границу для определенной строки, что достигается установкойborder-bottom: none;для всех ячеек этой строки.
Заключение:
Следуя данным рекомендациям, вы без труда уберете пробелы между границами ячеек таблицы и уберете ненужные границы по вашему усмотрению. Этот подход обеспечивает более аккуратный и профессиональный вид вашей таблицы, а также улучшает пользовательский опыт на вашем сайте.