Question

我正在努力将包含{Lazy，Dog，Then，It}的单元格放在相同的标题下（带有1的colspan）

我尝试在我的单元格中创建div标签，创建2个单元格，以及我能想到的所有可能的宽度和colspan组合。

使用div标签和CSS我可以在标题下获得Lazy和Dog，但它们不是单个单元格。

    <html>
<head>
<style>

        table,td,tr,th{
            border: 1px solid black;
            }


            .lazy {
            float: left;
            width: 50%;
            }

            .dog {
            float: right;
            width: 50%;
            }
</style>
</head>
<body>
<table>
            <tr>
                <th>Quick</th>
                <th>brown fox</th>
                <th>jumps</th>

            </tr>

            <tr>
                <td rowspan=3>over the</td>
                <td><div class="lazy">lazy</div> <div class="dog">dog</div></td>
                <td>and</td>
            </tr>

            <tr>
                <td>then</td>
                <td>it</td>
                <td>fall</td>
            </tr>

            <tr>
                <td colspan=2> prey to a lion </td>
            </tr>

</table>
</body>
</html>

感谢您的任何建议。

Answer 1

将colspan="2"添加到<th>brown fox</th>

您不必将div <td>放入单独的数据

然后修改您的<td colspan=2> prey to a lion </td>

到<td colspan="3"> prey to a lion </td>

这是工作小提琴，希望它能帮到你

https://jsfiddle.net/LLa90017/1/

Answer 2

简单如下：

        table, td, tr, th {
            border: 1px solid black;
        }


        .lazy {
            float: left;
            width: 50%;
        }

        .dog {
            float: right;
            width: 50%;
        }

<table>
        <tr>
            <th>Quick</th>
            <th colspan="2">brown fox</th>
            <th>jumps</th>

        </tr>

        <tr>
            <td rowspan=3>over the</td>
            <td>lazy</td> 
            <td>dog</td>
            <td>and</td>
        </tr>

        <tr>
            <td>then</td>
            <td>it</td>
            <td>fall</td>
        </tr>

        <tr>
            <td colspan=3> prey to a lion </td>
        </tr>

    </table>

将两个单元格置于标题下，并且colspan为1

2 个答案: