如何分割td？

Question

我正在尝试用图片创建一个 table，我希望在第一个 tr 图片会变大，第二张会变小 50%。我怎样才能删除它们之间的 space？

Html

<table class="photos" style="border-spacing: 0; border-width: 0; padding: 0 0; border-width: 0;  border: 1; width: 100%;" >
    <tr>
        <td><img src="Dad.jpg" alt="dad" /></td>
        <td><img src="gili.jpg" alt="gili" /></td>
        <td><img src="me2.jpg" alt="me" /></td>
    </tr>
    <tr style="border-collapse: collapse;">
        <td><img src="Hotrack.jpg" alt="hotrack" /></td>
        <td><img src="shir.jpg" alt="shir" /></td>

        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>

    </tr>

</table>

图片说明：

Answer 1

将其分成 2 个表：

<table class="photos" style="border-spacing: 0; border-width: 0; padding: 0 0; border-width: 0;  border: 1; width: 100%;" >
    <tr>
        <td><img src="Dad.jpg" alt="dad" /></td>
        <td><img src="gili.jpg" alt="gili" /></td>
        <td><img src="me2.jpg" alt="me" /></td>
    </tr>
</table>
<table class="photos" style="border-spacing: 0; border-width: 0; padding: 0 0; border-width: 0;  border: 1; width: 100%;" >
    <tr style="border-collapse: collapse;">
        <td><img src="Hotrack.jpg" alt="hotrack" /></td>
        <td><img src="shir.jpg" alt="shir" /></td>

        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>

    </tr>

</table>

Answer 2

正如 SeaSarp 所说，不要使用表格。您可以改用 ul 和 li 元素。要存档您想要的内容，您可以创建两个列表（每行一个）并将图像放在每个 li 中。像这样：

<ul>
    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>
</ul>

<ul>
    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>
</ul>

默认情况下，列表具有垂直布局和一些其他细节，您可以使用 css:

进行更改

ul {
    list-style:none; /* Do not show list points */
    display: flex; /* All elements together */
}

ul li {
    display:inline-block; /* All elements inline */
}

如何分割td？

How to split td?

html

split

space

html-table

示例：http://jsfiddle.net/xe9a1ev9/