对齐表格单元格内容（不能使用 javascript 或外部 css 文件）

Question

我正在尝试制作一个看起来有点像下图中的表格，外部表格的每个 td 单元格的右上角有一个数字，左下角有一个边框和文本，没有边框：

如您所见，我几乎实现了我想要的，在每个单元格中都有一个表格，如果只有右上角的数字在它们周围有边框就足够了。

我的代码如下：

<style>
    caption {
        font-size: 15px;
    }

    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        border-spacing: none;
        width: 100%;
    }

    td,
    th {
        border-collapse: collapse;
        text-align: center;
    }

    th {
        border: 1px solid black;
        padding: 8px;
    }

    td {
        padding: none;
        border: 1px solid black;
    }

    td .celltable tr td{
        border:none;
    }
    table tr td  .celltable > tr:first-child td:nth-child(2) {
        border-collapse: collapse;
        border: 8px solid black;

    } 

还有桌子：

<table id="tab1">
    <thead>
        <caption><b>Taulukko 1:</b> Kuljetusongelma.</caption>
    </thead>
    <tbody>
        <tr>
            <th colspan="2" rowspan="2" style="border:none;"></th>
            <th colspan="5">Päämäärät</th>
        </tr>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>Tarjonnat</th>
        </tr>
        <tr>
            <th rowspan="2">Lähteet</th>
            <th>1</th>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>8</td>
                    </tr>
                    <tr>
                        <td>[[input:ans1]] [[validation:ans1]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>[[input:ans2]] [[validation:ans2]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>14</td>
                    </tr>
                    <tr>
                        <td>[[input:ans3]] [[validation:ans3]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>11</td>
                    </tr>
                    <tr>
                        <td>[[input:ans4]] [[validation:ans4]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td rowspan="2">[[input:ans5]] [[validation:ans5]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>65</td>
        </tr>
        <tr>

            <th>2</th>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>9</td>
                    </tr>
                    <tr>
                        <td>[[input:ans6]] [[validation:ans6]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>6</td>
                    </tr>
                    <tr>
                        <td>[[input:ans7]] [[validation:ans7]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>12</td>
                    </tr>
                    <tr>
                        <td>[[input:ans8]] [[validation:ans8]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>15</td>
                    </tr>
                     <tr>
                        <td>[[input:ans9]] [[validation:ans9]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td>[[input:ans10]] [[validation:ans10]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>55</td>
        </tr>
        <tr>

            <th colspan="2">Kysynnät</th>
            <td>25</td>
            <td>40</td>
            <td>15</td>
            <td>20</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

我怎样才能从 inner 表格的右上方单元格中删除所有边框而不从外部表格中删除边框，或者可选地，是否有更好的替代方法来使用表格进行对齐？

Answer 1

试试这个：

caption {
    font-size: 15px;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    border-spacing: none;
    width: 100%;
}


td,
th {
    border-collapse: collapse;
    text-align: center;
}

th {
    border: 1px solid black;
    padding: 8px;
}

td {
    padding: none;
    border: 1px solid black;
}
table table th, table table td {
  border: none;
}

table table tr:first-child td:nth-child(2) {
  border: 1px solid red;
}

td .celltable tr td{
    border:none;
}
table tr td  .celltable > tr:first-child td:nth-child(2) {
    border-collapse: collapse;
    border: 8px solid black;

} 

内表中只有第一行的第二个单元格有边框，这是你想要做的吗？ p>

看这里 --> JSBin