CODEWITHSUNDEEP
htmlcsscss-float
user3524628
user3524628

Reputation: 137

Floating table cells

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

Answers (3)

schlonzo
schlonzo

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:

http://jsfiddle.net/7kM48/

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

Christopher Harris
Christopher Harris

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

David Zhou
David Zhou

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

Related Questions