Place button without using fixed

Question

I have a div contentinside a div main. contentcontains a table whose contents will be loaded from the database. Therefore, the width of the tables may vary. Just below the second column of the table I want to place a button. Thus, the position of the buttons should be automatically adjusted.

I currently solved it with a fixed position, but I would like to avoid using fixedit since the width of the column may change. In addition, the layout will not “respond” in 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>

Here's what it looks like:

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

Is there a better way?

Answer 1

jQuery -

JSFiddle

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

, , . .

Answer 2

, .

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>

Hide result

.

Answer 3

css

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

Answer 4

, ( , .

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

( "" ).

Answer 5

: plunker , - , .

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>

Answer 6

You can use margin:

button {
  margin-left: 80px;
}

Or you can add a button to the table:

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