Установите кнопку без использования фиксированного

Question

У меня есть div content внутри div main. content содержит таблицу, содержимое которой будет загружено из базы данных. Таким образом, ширина таблиц может отличаться.
Под второй колонкой таблицы я хочу поместить кнопку. Таким образом, положение кнопок должно быть автоматически отрегулировано.

В настоящее время я решил это с фиксированным положением, но я бы хотел избежать использования fixed, так как ширина столбца может измениться. Кроме того, макет не будет «ответственным» таким образом.

Это мой подход:

<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> 

Вот как это выглядит:

Вот https://jsfiddle.net/p58d731e/1/

Есть ли лучший способ?

Answer 1

Вы можете использовать JQuery и сделать что-то вроде этого

JSFiddle

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

Таким образом, левая позиция всегда будет то, что в начале второго столбца, даже когда левый столбец будет шире. Как here.

Answer 2

, пожалуйста, используйте ниже CSS и удалить позицию из кнопки

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

Answer 3

Попробуйте использовать этот код, это может помочь вам.

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

\t div { 
 
\t border: 1px solid; 
 
\t } 
 
\t #main { 
 
\t height: 500px; 
 
\t } 
 
\t #content { 
 
\t overflow: auto; 
 
\t height: 200px; 
 
\t } 
 
\t table, 
 
\t tr, 
 
\t td { 
 
\t border: 1px solid; 
 
\t } 
 
\t table { 
 
\t width: 100%; 
 
\t } 
 
\t button { 
 
\t margin: 0 auto; 
 
\t display: block; 
 
\t } 
 
\t

<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>

кнопка всегда будет находиться в центре.

Answer 4

Чтобы отслеживать динамический размер столбцов вы должны поместить кнопку в дополнительной строке и этот ряд полей (и любые другие свойства, отклоняясь от них таблицы.

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

(обеспечение aproper «buttonrow «стиль с вашими стилями».

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

Вы можете использовать поле:

button { 
    margin-left: 80px; 
} 

Или вы можете добавить кнопку в таблице:

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