如何在表格标题栏中移动按钮

时间:2019-07-07 08:49:50

标签: html bootstrap-4

我正在尝试将thead中的按钮移动几个像素,以便它可以位于其下方的边框底线颜色上...

<table>
  <thead>
    <!-- table extra buttons -->
    <tr style="border-bottom-style: solid; border-bottom-color: #FFE84D; border-bottom-width: 4px;">
      <th>
        <div class="mx-auto" style="background-color: #FFE84D; border-radius: 2px;">
          <button class="btn bg-default btn-sm">username</button>
        </div>
      </th>
      <th>
        <div class="mx-auto" style="background-color: #FFE84D; border-radius: 2px;">
          <button type="button" class="btn bg-default btn-sm">something else </button>
        </div>
      </th>
      <th>
        <div class="mx-auto" role="button" style="background-color: #FFE84D; border-radius: 4px;">
          <button class="btn bg-default btn-sm">time</button>
        </div>
      </th>
      <!-- table extra buttons end -->
    </tr>
  </thead>
</table>

1 个答案:

答案 0 :(得分:0)

使用此代码:

<table>
  <thead>
    <!-- table extra buttons -->
    <tr >
      <th>
        <div class="mx-auto" style="background-color: #FFE84D; border-radius: 2px;">
          <button class="btn bg-default btn-sm">username</button>
        </div>
      </th>
      <th>
        <div class="mx-auto" style="background-color: #FFE84D; border-radius: 2px;">
          <button type="button" class="btn bg-default btn-sm">something else </button>
        </div>
      </th>
      <th>
        <div class="mx-auto" role="button" style="background-color: #FFE84D; border-radius: 4px;">
          <button class="btn bg-default btn-sm">time</button>
        </div>
      </th>
      <!-- table extra buttons end -->
    </tr>
	<tr>
	<th colspan='3' style="border-bottom-style: solid; border-bottom-color: #FFE84D; border-bottom-width: 4px;"></th>
	</tr>
  </thead>
</table>