CODEWITHSUNDEEP
htmlcss
Evgenij Reznik
Evgenij Reznik

Reputation: 18594

Position a button without using fixed

I have a div content inside the div main. content contains a table, which contents will be loaded from a database. So the tables' width may differ.
Just under the 2nd column of the table I want to place a button. So the buttons' position should automatically be adjusted.

Currently, I solved it with a fixed position, but I would like to avoid using fixed, as the column widths may change. Also, the layout wouldn't be "responsible" this way.

This is my approach:

<style>
    div{
        border: 1px solid;
    }
    #main{
        height: 500px;
    }
    #content{
        overflow: auto;
        height: 200px;
    }
    table, tr, td{
        border: 1px solid;
    }
    button{
        position: fixed;
        left: 80px;
    }
</style>
<div id="main">
    <div id="content">
        <table>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
        </table>
    </div>
    <button>OK</button>
</div>

This is how it looks like:

DIV

Here is a https://jsfiddle.net/p58d731e/1/

Is there a better way?

Upvotes: 4

Views: 111

Answers (6)

theoretisch
theoretisch

Reputation: 1728

you can do it like this.plunker it is with position absolute and the button is everytime in the second row like you want it. independently from the content of the first row

css

th{
position:absolute;
top:210px;
background:#111;
color:#fff;
}
tr{

}
td{
    background:#ddd;
    border-right:1px solid #000;
    padding:5px;
}

#hide{
  visibility:hidden;
}

div {
      border: 1px solid;
    }

    #main {
      height: 500px;
    }

    #content {
      overflow: auto;
      height: 200px;
    }

html

<tr>
    <td id="hide"></td>
    <th><button>OK</button></th>
    </tr>

Upvotes: 0

Goombah
Goombah

Reputation: 2855

You could use jQuery and make something like this

JSFiddle

var position = $( ".column2" ).position();
$("button").css("left", position.left);

So the left-position will always be that of the start of the second column, even when the left column would be wider. Like here.

Upvotes: 0

S. Nadezhnyy
S. Nadezhnyy

Reputation: 582

You can use margin:

button {
  margin-left: 80px;
}

Or you can add button to table:

<tr>
        <td></td>
        <td><button >OK</button></td>
      </tr>

Upvotes: 0

rpy
rpy

Reputation: 4013

To track the dynamic size of the columns you should put the button into an additional row and make this row borderless (and any other properties deviating from the table ones.

<tr class="buttonrow"><td/><td><button>OK<button></td></td>

(providing aproper "buttonrow" style with your styles).

Upvotes: 0

Rahul Kashyap
Rahul Kashyap

Reputation: 977

Try to use this code this might help you.

table {
      width: 100%;
    }
    button {
      margin: 0 auto;
      display: block;
    }


	div {
	  border: 1px solid;
	}
	#main {
	  height: 500px;
	}
	#content {
	  overflow: auto;
	  height: 200px;
	}
	table,
	tr,
	td {
	  border: 1px solid;
	}
	table {
	  width: 100%;
	}
	button {
	  margin: 0 auto;
	  display: block;
	}
	
<div id="main">
  <div id="content">
    <table>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
    </table>
  </div>
  <button>OK</button>
</div>

The button will always be in center.

Upvotes: 1

Dhaval Patel
Dhaval Patel

Reputation: 1096

please use below css and remove position from button

button { display: table; margin: 0 auto; }

Upvotes: 0

Related Questions