CSS: таблица и TD без рамки

Question

Здесь используется angularjs с начальной загрузкой 3.

Я пытаюсь создать динамические строки, когда пользователь нажимает кнопку. Я завернул это в таблицу и с помощью ng-repeat.

При добавлении второго ряда создается ч / б разделение на два.

Ниже мой код:

<table class="table table-borderless">
    <thead>
      <tr>
        <td>Text</td>
        <td>Value</td>
      </tr>
    </thead>
    <tbody ng-repeat="m in options">

      <tr>
        <td>{{m.Name}}</td>
        <td>{{m.Country}}</td>
        <td>
          <a class="btn btn-xs" ng-click="Remove($index)"><i class="glyphicon glyphicon-trash"></i></a>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>
          <input type="text" class="form-control" ng-model="Name" required />
        </td>
        <td>
          <input type="text" class="form-control" ng-model="Country" required />
        </td>
        <td>
          <a class="btn btn-xs" ng-click="Add()"><i class="glyphicon glyphicon-plus"></i></a>
        </td>
      </tr>
    </tfoot>
  </table>

Я также создал демо на: http://jsfiddle.net/Lyxbhosv/

Любые входные данные о том, как удалить линию или границу между двумя TD

Answer 1

Я не совсем уверен, о чем вы спрашиваете, но на вашем примере двойная граница появляется при добавлении другой строки. Чтобы убрать двойную границу и оставить ее одинарной, просто измените ваш код следующим образом:

<tbody ng-repeat="m in options" style="border: none;">

Если вы можете объяснить дальше, это было бы здорово!

Answer 2

Пока я проверяю ваш код, вы уже присудили ответ. Но здесь я придумываю то, что я узнал из вашего кода и этот ответ:

<tbody ng-repeat="m in options" style="border: none;"> Это создаст много повторяющихся символов `'в вашем коде.

Но если вы поместите свой код 'ng-repeat = "m in options" "для ребенка <tr>' tag it will repeat the` каждый раз. и он больше не будет создавать повторяющуюся границу.

<tbody>
    <tr ng-repeat="m in options">

Так что выбор за вами!