Qbert Qbert - 4 years ago 104
CSS Question

Place two cells under a header with the colspan of 1

I am struggling to put the cells containing { Lazy, Dog, Then, It } under the same header (with a colspan of 1)

I've tried creating div tags within my cell, creating 2 cells, and all the possible widths and colspan combinations I can think of.

enter image description here

Using div tags and CSS I can get Lazy and Dog under the header, but they are not individual cells.

enter image description here

<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>


Thank you for any advice.

Answer Source

add colspan="2" to <th>brown fox</th>

you don't have to put div inside <td> to separate data

then edit your <td colspan=2> prey to a lion </td>

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

here is the working fiddle, hope it helped you

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download