是什么导致我的行在使用 html、css 和 js 构建的表中消失？

Question

在添加模态触发器之前，表格的行已经存在并且看起来不错。我相信这与我放在桌子上的按钮有关。我刚刚开始弄乱 HTML/CSS/JS，所以这对我来说仍然是非常新的和不同的。在未来的努力中帮助我的任何指示也受到赞赏。

$('.toggleModal').on('click', function(e) {

  $('.modal').toggleClass('active');

});

html {
  font: 0.75em/1.5 sans-serif;
  color: #333;
  background-color: #fff;
  padding: 1em;
}


/* Tables */

table {
  width: 100%;
  margin-bottom: 1em;
  border-collapse: collapse;
  border: 1px;
}

th {
  font-weight: bold;
  background-color: #ddd;
}

td {
  padding: 0.5em;
  border: 1px solid #ccc;
  border: 1px;
}

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  text-decoration: none;
  color: initial;
}

@font-face {
  font-family: 'ios7-icon';
  src: url("//ios7-icon-font-demo.herokuapp.com/fonts/ios7-icon.woff") format("woff"), url("//ios7-icon-font-demo.herokuapp.com/fonts/ios7-icon.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 50px;
  font-family: 'Helvetica Neue' !important;
  font-weight: 300;
}

.wrapper {
  max-width: 500px;
  margin: 0 auto;
}

h1 {
  font-weight: 100;
  font-size: 45px;
  color: #007aff;
}

h2 {
  font-weight: 500;
  font-size: 21px;
  margin-bottom: 15px;
}

section {
  margin-top: 30px;
}

section p {
  line-height: 1.4;
  margin-bottom: 20px;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: none;
  outline: none;
  font: inherit;
  cursor: pointer;
  margin: 0;
  padding: 0;
  /* background: #ffffff; */
  color: #007aff;
  font-weight: 300;
  font-size: 14px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  /*  &:last-child {
           border-color: red;
           margin-bottom: 0;
         }*/
}

button:hover {
  text-decoration: underline;
}

button.button-border {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 10px 12px 8px 12px;
  border: 1px solid #007aff;
}


/* button.button-border:hover { */


/* background: #007aff; */


/* color: #ffffff; */


/* text-decoration: none; */


/* } */


/* button.button-success { */


/* color: #4dd865; */


/* border-color: #4dd865; */


/* } */


/* button.button-success:hover { */


/* background: #4dd865; */


/* } */


/* button.button-error { */


/* color: #ff3b30; */


/* border-color: #ff3b30; */


/* } */


/* button.button-error:hover { */


/* background: #ff3b30; */


/* } */

.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 430px;
  height: auto;
  margin-left: -200px;
  margin-top: -150px;
  background-color: #ffffff;
  padding: 25px;
  border-radius: 5px;
  z-index: 10;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}

.modal.active {
  display: block;
}

.modal header {
  position: relative;
}

.modal h2 {
  text-align: center;
}

.modal .close {
  position: absolute;
  top: 3px;
  right: 0;
  margin: 0;
}

.pull-right {
  float: right;
}

.icon {
  display: inline-block;
  font-size: inherit;
  font-family: 'ios7-icon';
  margin-right: 5px;
  color: inherit;
  -webkit-text-rendering: geometricPrecision;
  -moz-text-rendering: geometricPrecision;
  -ms-text-rendering: geometricPrecision;
  -o-text-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<table id="tableId">
  <table rules="groups">
    <table style="border: 1px solid black;">
      <thead>

        <tr>
          <th> </th>
          <th>EmployeeNum</th>
          <th>EmployeeName</th>
          <th>ChargeNum</th>
          <th>Hours</th>
        </tr>
      </thead>
      <tr id="a">
        <td><button class="button-border toggleModal">
          <span class="icon"></span> Timesheet Approval</button> </td>
        <td>123</td>
        <td>Mike</td>
        <td>10</td>
        <td>40</td>
      </tr>

      <tr id="b">
        <td><button class="button-border toggleModal">
          <span class="icon"></span> Timesheet Approval</button></td>
        <td>EmployeeNum</td>
        <td>EmployeeName</td>
        <td>ChargeNum</td>
        <td>Hours</td>
      </tr>

      <tr id="c">
        <td><button class="button-border toggleModal">
          <span class="icon"></span> Timesheet Approval</button></td>
        <td>EmployeeNum</td>
        <td>EmployeeName</td>
        <td>ChargeNum</td>
        <td>Hours</td>
      </tr>
    </table>
  </table>
</table>

<div class="modal">

  <header>

    <button class="close toggleModal">Close</button>
  </header>

  <section>
    <p>To approve the timesheet and submit it to WAM press "Approve", to decline the timesheet for later viewing press "Disapprove"</p>
  </section>

  <button class="button-border button-success toggleModal">
      <span class="icon"></span> Approve </button>

  <button class="button-border button-error pull-right toggleModal">
      <span class="icon"> </span> Disapprove </button>
  <!-- <script> $(docuemnt).ready(function(){ -->
  <!-- var rowCount = $('table#tableId tr:#a').index() + 1; -->
  <!-- $("#a").style.color = "red"}); -->
  <!-- </script> -->

</div>

Answer 1

td {
  padding: 0.5em;
  border: 1px solid #ccc;
  border: 1px;
}

在您上面的代码中。删除border: 1px;