Reputation: 137
How can I float td's within a table?
I have the following table:
<table align="center">
<tr>
<td>Huge IMAGE</td>
<td>VERY long TEXT</td>
<td>Annotations</td>
</tr>
</table>
Now I'd like the td-cells to move like this (but with floats) when a small end user device loads this view:
<table align="center">
<tr>
<td>Huge IMAGE</td>
</tr>
<tr>
<td>VERY long TEXT</td>
</tr>
<tr>
<td>Annotations</td>
</tr>
</table>
Upvotes: 0
Views: 5997
Reputation: 1404
I don't know exactly, what you want to do, but does it have to be a table? Maybe you should use an unordered list instead. In this list you can float your list items.
Something like:
CSS
ul li{
float: left;
width: 100px;
height: 100px;
list-style: none;
}
HTML
<ul>
<li style="background-color: yellow;">Content 1</li>
<li style="background-color: fuchsia;">Content 2</li>
<li style="background-color: green;">Content 3</li>
</ul>
Upvotes: 1
Reputation: 112
I would highly advise that you use a nested div structure instead of tables for your layout.
<div class="outerContainer">
<div class="imageHolder"></div>
<div class="textDescHolder"></div>
<div class="annotations"></div>
</div>
Then use "display: inline-block" on the inner div elements to control the layout. Although I am unclear as to how you wish to display the text and annotations in relation to the images.
Upvotes: 2
Reputation: 142
You could try using columns from bootstrap:
<div class="container" style="text-align: center">
<div class="col-md-4 col-sm-12">
Huge Image
</div>
<div class="col-md-4 col-sm-12">
Very long text
</div>
<div class="col-md-4 col-sm-12">
Annotations
</div>
</div>
this way you have the same output in a normal screen, and one row each for a small device
Upvotes: 0