Почему свойство border-collapse не работает для моей таблицы HTML

У меня есть следующая таблица с вложенными таблицами. Почему свойство свертывания границы не работает для моей таблицы HTML.

Я добавил свойство border-collapse как в основную таблицу, так и во вложенные таблицы. Я вижу только внешние границы и никаких внутренних границ.

<table style = "border-collapse: collapse;">
    <tr>
        <th>Existing data</th>
        <th>New table</th>
    </tr>
    <tr>
        <td>
            <!-- Nested Table 1 -->
            <table style = "border-collapse: collapse;">
                <tr>
                    <th>Hostname</th>
                    <th>IP</th>
                    <th>MAC</th>
                </tr>
                <tr>
                    <td>ftp01</td>
                    <td>10.1.1.4</td>
                    <td>...01</td>
                </tr>
                <tr>
                    <td>www01</td>
                    <td>10.1.1.5</td>
                    <td>...02</td>
                </tr>
            </table>
        </td>
        <td>
            <!-- Nested Table 2 -->
            <table style = "border-collapse: collapse;">
                <tr>
                    <th>IP</th>
                    <th>MAC</th>
                    <th>Owner</th>
                </tr>
                <tr>
                    <td>10.1.1.4</td>
                    <td>...bb</td>
                    <td>alice</td>
                </tr>
                <tr>
                    <td>10.1.1.6</td>
                    <td>...cc</td>
                    <td>bob</td>
                </tr>
                <tr>
                    <td>10.1.1.7</td>
                    <td>...dd</td>
                    <td>chris</td>
                </tr>
                <tr>
                    <td>10.1.1.4</td>
                    <td>...ee</td>
                    <td>doug</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

html css

16.04.2024 07:26

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Ответы 3

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

Просто уделите немного внимания внешним ячейкам, содержащим эти вложенные таблицы. Добавьте немного стиля с помощью style="border: 1px сплошной черный;" на этих элементах вы увидите, что эти внутренние границы снова появятся в поле зрения, даже если border-collapse: коллапс; делает свое дело. Посмотрите HTML ниже:

<table style = "border-collapse: collapse;">
    <tr>
        <th>Existing data</th>
        <th>New table</th>
    </tr>
    <tr>
        <td style = "border: 1px solid black;">
            <!-- Nested Table 1 -->
            <table style = "border-collapse: collapse;">
                <!-- Table content -->
            </table>
        </td>
        <td style = "border: 1px solid black;">
            <!-- Nested Table 2 -->
            <table style = "border-collapse: collapse;">
                <!-- Table content -->
            </table>
        </td>
    </tr>
</table>

16.04.2024 07:48

Я думаю, вы хотите сделать просто это:

<table border = "1" style = "border-collapse: collapse;">

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

Альтернатива:

table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid black; /* Border for cells */
}

16.04.2024 07:54

Используя ваш код, я вообще не вижу границ. Таблицы и ячейки таблиц по умолчанию не имеют границ; вам нужно добавить их, если вы хотите их. Это тот результат, которого вы добиваетесь?

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 5px 10px;
}

<table>
    <tr>
        <th>Existing data</th>
        <th>New table</th>
    </tr>
    <tr>
        <td>
            <!-- Nested Table 1 -->
            <table>
                <tr>
                    <th>Hostname</th>
                    <th>IP</th>
                    <th>MAC</th>
                </tr>
                <tr>
                    <td>ftp01</td>
                    <td>10.1.1.4</td>
                    <td>...01</td>
                </tr>
                <tr>
                    <td>www01</td>
                    <td>10.1.1.5</td>
                    <td>...02</td>
                </tr>
            </table>
        </td>
        <td>
            <!-- Nested Table 2 -->
            <table>
                <tr>
                    <th>IP</th>
                    <th>MAC</th>
                    <th>Owner</th>
                </tr>
                <tr>
                    <td>10.1.1.4</td>
                    <td>...bb</td>
                    <td>alice</td>
                </tr>
                <tr>
                    <td>10.1.1.6</td>
                    <td>...cc</td>
                    <td>bob</td>
                </tr>
                <tr>
                    <td>10.1.1.7</td>
                    <td>...dd</td>
                    <td>chris</td>
                </tr>
                <tr>
                    <td>10.1.1.4</td>
                    <td>...ee</td>
                    <td>doug</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

16.04.2024 09:06

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

Как разместить текст над полем-оберткой?

Перемещайте полосу прокрутки, прокручивая страницу

Можно ли надежно внедрить кликабельное изображение или кнопку поверх элемента с помощью JavaScript?

Вставка видео не масштабируется в карусели начальной загрузки 5

Делаем задержку анимации, сделанной с помощью Animate css

Максимальная ширина не работает в электронной почте в формате html при доступе к Gmail из мобильного браузера?

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

Как избежать мерцания в слайд-шоу, созданном с помощью CSS-анимации?

Адаптивное изображение с текстом на любой ширине экрана

CSS 3: наложение изображения при наведении

Почему свойство border-collapse не работает для моей таблицы HTML

Ответы 3

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

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