无法在表格上添加表格按钮行答案

【问题标题】：Unable to add table button row over a table无法在表格上添加表格按钮行
【发布时间】：2019-09-26 04:58:41
【问题描述】：

我刚刚开始在 Rails 上学习 ruby，基本上我想做的是在我的 .html.erb 表上添加一个按钮行，但由于我是新手，所以我无法做到。任何帮助将不胜感激

我试过把它放在同一张桌子上，但也做不到

<html>
<style type="text/css">
  .affix {
    top: 50px;
    visibility: visible !important;
    font-weight: bold;
    padding-left: 25px;
    padding-right: 25px;
  }
  #table-header {
    /*background: white;*/
    visibility: hidden;
  }
  .affix > div { padding: 8px; }
  #table-header > div {
    float: left; text-align: center;
    border: solid #ccc 1px;
  }
</style>
<body>
<div class="row margin10"></div>

<div>

  <div class="row col-md-12 whiteBack" data-spy="affix" id="table-header" data-offset-top="165">
    <div style="width:20%;">roll no</div>
    <div style="width:20%;">name</div>
    <div style="width:20%;">phone no</div>
    <div style="width:20%;">subject</div>
    <div style="width:20%;">mark</div>
    <div style="width:20%;">grade</div>

  </div>
  <div class = "well whiteBack">
    <table class = "table table-bordered table-striped margin10-both table-hover showRow" >
      <thead>
        <th style ="width:25%"><%= link_to '<button type="button" >button 1</button>'.html_safe %></th>
        <th style ="width:13%"><%= link_to '<button type="button">button 2</button>'.html_safe %></th>
        <th style ="width:13%"><%= link_to '<button type="button">Button 3</button>'.html_safe %></th>
        <th style ="width:10%"><%= link_to '<button type="button">Button 4</button>'.html_safe %></th>
        <th style ="width:13%"></th>
        <th style ="width:11%"></th>
        <th style ="width:15%"></th>
      </thead>

    </table>
    <table class = "table table-bordered table-striped margin10-both table-hover showRow">
      <thead>
      <tr>
        <th width="25%">roll no</th>
        <th width="13%">name</th>
        <th width="13%">phone no</th>
        <th width="10%">subject</th>
        <th width="13%">mark</th>
        <th width="11%">grade</th>
        <th width="15%"></th>
      </tr>
      </thead>

        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td ><%= link_to '<button type="button">submit</button>'.html_safe %></td>
        </tr>
    </table>
  </div>
</div>
</body>
</html>

Button1 Button2  Button3  Button4           

roll_no  name   phone_no  subject  marks  grade /*Buttons*/     
xx       xxx       xxx      0        xx     x     submit
xx       xxx       xxx      0        xx     x     submit
xx       xxx       xxx      0        xx     x     submit
x        xxx       xxx      0        xx     x     submit

按钮应该与相应的列标题正确对齐，例如 Button1 应该只覆盖 roll_no 标题空间，并且应该与 roll_no 一样大小

【问题讨论】：

标签： html css ruby-on-rails-4

【解决方案1】：

使用colspan 将按钮行添加到thead 最后一列。检查sn-p。

.affix {
  top: 50px;
  visibility: visible !important;
  font-weight: bold;
  padding-left: 25px;
  padding-right: 25px;
}

table {
  width: 100%;
  text-align: left;
}

#table-header {
  /*background: white;*/
  visibility: hidden;
}

.affix>div {
  padding: 8px;
}

#table-header>div {
  float: left;
  text-align: center;
  border: solid #ccc 1px;
}

<div class="row margin10"></div>

<div>

  <div class="row col-md-12 whiteBack" data-spy="affix" id="table-header" data-offset-top="165">
    <div style="width:20%;">roll no</div>
    <div style="width:20%;">name</div>
    <div style="width:20%;">phone no</div>
    <div style="width:20%;">subject</div>
    <div style="width:20%;">mark</div>
    <div style="width:20%;">grade</div>

  </div>
  <div class="well whiteBack">

    </table>
    <table class="table table-bordered table-striped margin10-both table-hover showRow">
      <thead>
        <tr>
          <th>
            <button type="button">button 1</button></th>
          <th>
            <button type="button">button 2</button></th>
          <th>
            <button type="button">Button 3</button></th>
          <th colspan="4">
            <button type="button">Button 4</button></th>

        </tr>
        <tr>
          <th width="25%">roll no</th>
          <th width="13%">name</th>
          <th width="13%">phone no</th>
          <th width="10%">subject</th>
          <th width="13%">mark</th>
          <th width="11%">grade</th>
          <th width="15%"></th>
        </tr>
      </thead>

      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
          <%= link_to '<button type="button">submit</button>'.html_safe %></td>
      </tr>
    </table>
  </div>
</div>

【讨论】：