Question

我想将最后一个div放在每行的下面。是否可以在不破坏display: table的情况下实现这一目标？我不想为此添加第二行。我试图在下面的图片上解释我的问题

我的html

                    <table>
                        <thead>
                            <tr>
                                <td>id</td>
                                <td>creator</td>
                                <td>receiver</td>
                                <td>start_date</td>
                                <td>end_date</td>
                                <td>daily_pay</td>
                                <td>total_votes</td>
                                <td>permlink</td>
                                <td></td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>3</td>
                                <td>aaaabbbb</td>
                                <td>aaaabbbb</td>
                                <td>
                                    {new Date(
                                        '2015-05-01T00:00:00'
                                    ).toLocaleString()}
                                </td>
                                <td>
                                    {new Date(
                                        '2019-06-01T00:00:00'
                                    ).toLocaleString()}
                                </td>
                                <td>100.000</td>
                                <td>0</td>
                                <td>
                                    <a href="javascript:void(0)">link</a>
                                </td>
                                <td>testing stuff</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>aaaabbbb</td>
                                <td>aaaabbbb</td>
                                <td>
                                    {new Date(
                                        '2015-05-01T00:00:00'
                                    ).toLocaleString()}
                                </td>
                                <td>
                                    {new Date(
                                        '2019-06-01T00:00:00'
                                    ).toLocaleString()}
                                </td>
                                <td>100.000</td>
                                <td>0</td>
                                <td>
                                    <a href="javascript:void(0)">link</a>
                                </td>
                                <td>
                                    Lorem ipsum dolor sit amet consectetur
                                    adipisicing elit. Reprehenderit amet
                                    ipsa adipisci praesentium unde, illum
                                    iure fuga necessitatibus dolorem. Sed
                                    ipsam facilis modi eligendi cumque
                                    maiores quae repellat incidunt error!
                                </td>
                            </tr>
                        </tbody>
                    </table>

Answer 1

如果您将新的<td>内的最后一个单元格设为<tr>，并且通过colspan跨越所有8列，则将是最语义的。

tbody td {
  padding: .5em;
}

tbody tr:nth-child(odd) {
  background-color: #ccc;
}

<table>
  <thead>
    <tr>
      <th>id</th>
      <th>creator</th>
      <th>receiver</th>
      <th>start_date</th>
      <th>end_date</th>
      <th>daily play</th>
      <th>total votes</th>
      <th>permalink</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>aaaaaaaa</td>
      <td>bbbbbbbb</td>
      <td>mike n</td>
      <td>01/15/2000</td>
      <td>01/15/2001</td>
      <td>1000.00</td>
      <td>0</td>
      <td><a href="#">link</a></td>
    </tr>
    <tr>
      <td colspan="8">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quod officiis nostrum provident distinctio consequatur nobis vero vel dignissimos magnam. Harum velit mollitia veniam, provident, labore repellat beatae nisi error!
      </td>
    </tr>
    <tr>
      <td>aaaaaaaa</td>
      <td>bbbbbbbb</td>
      <td>mike n</td>
      <td>01/15/2000</td>
      <td>01/15/2001</td>
      <td>1000.00</td>
      <td>0</td>
      <td><a href="#">link</a></td>
    </tr>
    <tr>
      <td colspan="8">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quod officiis nostrum provident distinctio consequatur nobis vero vel dignissimos magnam. Harum velit mollitia veniam, provident, labore repellat beatae nisi error!
      </td>
    </tr>

  </tbody>

</table>

Answer 2

请删除所有tr之后要出现的最后一个td文本，在永久链接之后创建一个新的tr，然后添加一个要全宽显示的td，请参见我的建议。

<table>
  <thead>
    <tr>
      <td>id</td>
      <td>creator</td>
      <td>receiver</td>
      <td>start_date</td>
      <td>end_date</td>
      <td>daily_pay</td>
      <td>total_votes</td>
      <td>permlink</td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
      <td>aaaabbbb</td>
      <td>aaaabbbb</td>
      <td>
        {new Date( '2015-05-01T00:00:00' ).toLocaleString()}
      </td>
      <td>
        {new Date( '2019-06-01T00:00:00' ).toLocaleString()}
      </td>
      <td>100.000</td>
      <td>0</td>
      <td>
        <a href="javascript:void(0)">link</a>
      </td>
      <!-- <td>testing stuff</td> -->
    </tr>
    <tr>
      <td colspan="8">testing stuff</td>
    </tr>
    <tr>
      <td>3</td>
      <td>aaaabbbb</td>
      <td>aaaabbbb</td>
      <td>
        {new Date( '2015-05-01T00:00:00' ).toLocaleString()}
      </td>
      <td>
        {new Date( '2019-06-01T00:00:00' ).toLocaleString()}
      </td>
      <td>100.000</td>
      <td>0</td>
      <td>
        <a href="javascript:void(0)">link</a>
      </td>
    </tr>
    <tr>
      <td colspan="8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit amet ipsa adipisci praesentium unde, illum iure fuga necessitatibus dolorem. Sed ipsam facilis modi eligendi cumque maiores quae repellat incidunt error!</td>
    </tr>
  </tbody>
</table>

不规则表格div

2 个答案: