Align div to a table column

Question

I've spent days trying to find the solution of my problem.

I would like to align a or a to a specific column of my table.

For example for my sample :

<table border="1" >
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
</table>
<div>Test</div>

I would like to align my test below the 2.2 cell.

I'm using Jquery.

Do you have any ideas ?

Answer 1

You can try following fiddle

$(document).ready(function(){
  var position = $("#test").position();

  $("div").css({
    "left": position.left
  });  
});

Answer 2

DEMO 1 http://jsfiddle.net/YrHXF/ (using css only)

If you dont want to add width in CSS thn using jquery
DEMO 2 http://jsfiddle.net/4Nzfr/

div,table{
    text-align:center;
    width:100px;
}

Answer 3

You need to wrap your table and that div and then define the width and text-align:

<div class="wrap">
<table border="1" >
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
</table>
<div>Test</div>
</div>

demo

Answer 4

Just use <center> Tag. Why do you write extra code unnecessary? :)

 <center>    
       <table border="1" >
            <tr>
                <td>1.1</td>
                <td>1.2</td>
                <td>1.3</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td>2.2</td>
                <td>2.3</td>
            </tr>
        </table>
        <div>Test</div>
    </center>

or

<div class="container">
   <table border="1" >
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
    </table>
    <div>Test</div>
</div>

.container{
    text-align:center;
    display:table;
}

Answer 5

Please set the style in your corresponding css, or use as u please :)

<div style="width:200px;">
    <table border="1" style="width:100%" >
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
    </table>
    <div style="text-align:center;">Test</div>
    </div>