Question

我在使用＆＃34;不常见＆＃34;创建表时遇到问题结构

这是我到目前为止所做的事情

但我需要＆＃34;描述＆＃34;表头与上面的元素（Type，Year，Location，Postcode）和＆＃34; Price＆＃34;相同。应该完全在＆＃34;日期＆＃34;所以我在考虑嵌套表解决方案。

这是我的html和fiddle

<table border="1">
    <tr>
        <td class="category">
            Picture
        </td>
        <td>
            <table class="ad-header" style="text-align: left;">
                <tr>
                    <th>Type</th>
                    <th>Year</th>
                    <th>Location</th>
                    <th>Postcode</th>
                    <th>Date</th>
                </tr>
                <tr>
                    <td>Volkswagen Passat Variant</td>
                    <td>2017</td>
                    <td>Uusimaa - Kerava</td>
                    <td>02650</td>
                    <td>15.12.2017</td>
                </tr>
            </table>
            <table class="ad-content" style="text-align: left;">
                <tr>
                    <th>Description</th>
                    <th>Price </th>
                </tr>
                <tr>
                    <td>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum delectus accusantium mollitia iste numquam, enim asperiores, doloribus sunt aliquam quisquam veniam. Dolores aliquam similique nihil harum, voluptates! Ea, voluptas, veritatis!
                    </td>
                    <td>
                        450€
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Answer 1

你需要使用colspan。请检查此链接：https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_colspan

Answer 2

重构您的表格，以便类型，年份，地点，邮政编码，日期，说明和价格位于同一个表格中，但后两者位于单独的行中。您可以使用DELETE /session/:sessionId和<th colspan="4">作为说明中的表格单元格。请参阅概念验证示例：

<td colspan="4">

Answer 3

<table border="1">
    <tr>
        <td rowspan="4" class="category">Picture</td>
        <td>Type</td>
        <td>Year</td>
        <td>Location</td>
        <td>Postcode</td>
        <td>Date</td>
    </tr>
    <tr>
        <td>Volkswagen Passat Variant</td>
        <td>2017</td>
        <td>Uusimaa - Kerava</td>
        <td>02650</td>
        <td>15.12.2017</td>
    </tr>
    <tr>
        <td colspan="4">Description</td>
        <td>Price</td>
    </tr>
    <tr>
        <td colspan="4">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum delectus accusantium mollitia iste
            numquam, enim asperiores, doloribus sunt aliquam quisquam veniam. Dolores aliquam similique nihil harum,
            voluptates! Ea, voluptas, veritatis!
        </td>
        <td>
            450€
        </td>
    </tr>
</table>

嵌套表实现

3 个答案: