时间戳

首页 > 解决方案 > 不规则的表格 div

html - 不规则的表格 div

问题描述

我想将最后一个 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>

标签： htmlcss

解决方案

如果您将最后一个单元格 a<td>放在一个新的<tr>跨所有 8 列中，那将是最语义化的colspan。

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>

推荐阅读