Как я могу создать эти две объединенные ячейки, которые соприкасаются друг с другом, не получая странного распределения?

#html #html-table

Вопрос:

Я недавно начал изучать HTML и в настоящее время выполняю несколько настольных упражнений. Я не получаю желаемого распределения после попытки получить объединенную ячейку из 2 строк и объединенную ячейку 2×2 (строка и столбец), чтобы они соприкасались друг с другом и выглядели как на изображении выше.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 1px 30px;
            text-align: center;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }
    </style>

</head>
<body>
    <table>
        <tr>
            <td rowspan="2">1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td rowspan="2">5</td>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
        </tr>
        <tr>
            <td colspan="2">8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>10</td>
            <td colspan="2">11</td>
        </tr>
        <tr>
            <td rowspan="3" colspan="2">12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>14</td>
        </tr>
        <tr>
            <td>15</td>
        </tr>
        <tr>
            <td>16</td>
            <td colspan="2" rowspan="2">17</td>
        </tr>
        <tr>
            <td rowspan="2">18</td>
        </tr>
        <tr>
            <td>19</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

Я пробовал это, но это не дает мне желаемого результата. Ты знаешь, что я могу сделать?

Заранее благодарю вас!

1. Что вы подразумеваете под «странным распределением»?

2. Хорошо, теперь я понимаю, так как я прогнал вашу вырезку и выяснил, что проблема в нижних 3 строках, которые отображаются как 2. Очень странно. Это должно сработать….

3. Исходя из экспериментов, я думаю, что вам нужна хотя бы одна ячейка для полного существования внутри данной строки, чтобы эта строка существовала. Например. Если только ячейки строки объединены в другие строки, эта строка сворачивается и не существует. Может существовать свойство атрибута/CSS, которое запрещает такое поведение «свертывания строк».

Ответ №1:

Следуя комментариям Родди, строка существует, она просто имеет высоту 0. Возможно, вам придется установить фиксированную высоту, чтобы заставить эту строку иметь высоту. Один из вариантов (ниже) — установить его на 18 tr . Вы также можете установить его на 17 td .

Если вы хотите, чтобы высота «свернутой» строки соответствовала высоте строки 16, вам, возможно, придется использовать скрипт для компоновки, прочитать высоту ячейки 16 и установить эту высоту на 18 tr .

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 1px 30px;
            text-align: center;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }
    </style>

</head>
<body>
    <table>
        <tr>
            <td>16</td>
            <td colspan="2" rowspan="2">17</td>
        </tr>
        <tr style="height: 22px">
            <td rowspan="2">18</td>
        </tr>
        <tr>
            <td>19</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>