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

尝试使用此代码，这可能会对您有所帮助。

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>

按钮将始终位于中心。

Answer 2

请使用以下css并从按钮中移除位置

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

Answer 3

要跟踪您应该使用的列的动态大小将按钮放入另一行并使该行无边界（以及任何其他属性偏离表格。

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

（为你的风格提供aproper“buttonrow”风格）。

Answer 4

你可以这样做。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 5

您可以使用保证金：

button {
  margin-left: 80px;
}

或者您可以在表格中添加按钮：

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

Answer 6

您可以使用jQuery并制作类似这样的内容

JSFiddle

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

因此左侧位置将始终是第二列开始的位置，即使左侧列更宽。像here.

一样

定位按钮而不使用固定

6 个答案: