td 在 tr 中的定位

Question

我有一个 table，它有多个 <td> 元素。

我需要元素成为 <tr> 的一部分，但分为 2 行：

示例：

<tr>
<td>1</td><td>2</td><td>3</td><td>3</td>
<td>5</td>
</tr>

我想要实现的目标是 1、2、3 和 4 在一条线上，5 在它们下面但跨越 <tr>

的整个长度

我不想使用多个 <tr> 元素。

我没有添加任何代码，因为我已经尝试添加 google 但没有找到任何东西，我不知道从哪里开始

Answer 1

在第 4 次之后使用 rowspan 它将解决您的问题！

Answer 2

要在不修改标记的情况下设置 table 的样式，您可以将 tr 和 td 的 display 属性更改为 block。

这里有一个 fiddle 可以看到它的实际效果。

标记：

<h3>original table</h3>

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
</table>

<h3>larger table</h3>

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
    </tr>
    <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
    </tr>
</table>

CSS：

body {
    color: #222;
}
table {
    width: 100%;
}
table * {
    box-sizing: border-box;
}
tr {
    display: block;
    width: 100%;
    border: 1px solid #222;
    border-right: none;
    padding: 0;
}
tr:before, tr:after {
    content:'';
    display: block;
}
tr:after {
    clear: both;
}
td {
    text-align: center;
    display: block;
    float: left;
    width: 25%;
    border-right: 1px solid #222;
}
td:nth-child(5) {
    width: 100%;
    border-top: 1px solid #222;
}
tr:nth-of-type(1n+2) {
    border-top: 0;
}

td 在 tr 中的定位

td positioning within tr

html

css

position

css-position