Невозможно добавить строку кнопки таблицы над таблицей - PullRequest
Новая
       12

Невозможно добавить строку кнопки таблицы над таблицей

0 голосов
/ 26 сентября 2019

Я только начал изучать 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

1 Ответ

0 голосов
/ 26 сентября 2019

Добавить строку кнопки в thead, используя colspan для последнего столбца.проверить фрагмент. 

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