Двойная рамка с более толстым контуром на одной стороне строки / столбца HTML CSS? - PullRequest
Новая
       76

Двойная рамка с более толстым контуром на одной стороне строки / столбца HTML CSS?

0 голосов
/ 25 октября 2019

изображение таблицы

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

Я попробовал все, но я также относительно новичок в css. Я также попытался с помощью 'outline' создать вторую рамку, но она создает вторую рамку для всей ячейки, и я пытаюсь создать вторую более толстую рамку только для одной стороны ячейки.

PS На картинке рассматриваемые границы на самом деле выглядят как тройные границы, но также я понятия не имею, как это сделать. 

<!DOCTYPE html>
<html lang="es">

<head>
    <style>
        tr.primer td {
            border: 0
        }
        
        tr td {
            border: 1pt solid;
            width: 15pt
        }
    </style>

</head>

<body>

    <table style="font-family:garamond;border:solid;border-collapse: collapse;text-align: center;width:30% " border=1>

        <tr class="primer">
            <td>

            </td>
            <td>
                1
            </td>
            <td>
                2
            </td>
            <td>
                3
            </td>
            <td>
                4
            </td>
            <td>
                5
            </td>
            <td>
                6
            </td>
            <td>
                7
            </td>
            <td>
                8
            </td>
        </tr>
        <tr style="border-top: hidden">
            <td>Condición 1</td>
            <td>Sí</td>
            <td>Sí</td>
            <td>Sí</td>
            <td>No</td>
            <td>No</td>
            <td>No</td>
            <td>Sí</td>
            <td>No</td>

        </tr>

        <tr>
            <td>Condición 2</td>
            <td>Sí</td>
            <td>Sí</td>
            <td>No</td>
            <td>Sí</td>
            <td>No</td>
            <td>Si</td>
            <td>No</td>
            <td>No</td>

        </tr>

        <tr>
            <td>Condición 3</td>
            <td>Sí</td>
            <td>No</td>
            <td>Sí</td>
            <td>Sí</td>
            <td>Sí</td>
            <td>No</td>
            <td>No</td>
            <td>No</td>

        </tr>

        <tr style="border-top: double 4px black; outline: solid 1px black;">
            <!-- this is where i have tried to insert a 
thicker second border using outline-->

            <td>Acción 1</td>
            <td>X</td>
            <td></td>
            <td>X</td>
            <td></td>
            <td></td>
            <td>X</td>
            <td></td>
            <td>X</td>

        </tr>

        <tr>
            <td>Acción 2</td>
            <td></td>
            <td>X</td>
            <td>X</td>
            <td></td>
            <td></td>
            <td></td>
            <td>X</td>
            <td>X</td>

        </tr>

        <tr>
            <td>Acción 3</td>
            <td></td>
            <td></td>
            <td></td>
            <td>T2</td>
            <td></td>
            <td>T2</td>
            <td>T2</td>
            <td></td>

        </tr>

        <tr>
            <td>Acción 4</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>T3</td>
            <td></td>
            <td></td>
            <td>T3</td>

        </tr>

    </table>

</body>

</html>
...